@squadbase/vantage 0.6.1 → 0.6.2-dev1.0010f67

package/registry/ui/attention-list.tsx

@@ -0,0 +1,465 @@
+// Copied by `vantage add ui attention-list`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/attention-list.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * AttentionList — 期日超過・期限間近・リスク・滞留に当たる行を上に寄せ、理由と次の一手を添えて並べる要対応一覧。
+ * 判定は `judgeAttention`（純関数）が行い、部品は並べ替えと描画だけをする。区分の文言としきい値
+ * （`dueSoonDays` / `staleDays`）は props で渡す。業務の意味（請求・商談・契約など）は呼び元が決める。
+ *
+ * - 区分は 1 行に 1 つ。複数に当たるときは 期日超過 ＞ リスク ＞ 期限間近 ＞ 滞留 の順で強いほうを採る。
+ * - 並びは区分の強さ、同じ区分では日数の大きい（遅れている・止まっている）行が先。日数が同じなら元の順。
+ * - 区分の色は StatusBadge の意味色（negative / warning / info）。色だけでなく区分名と日数の文で伝える。
+ * - 判定に当たらない行は既定で出さない（`includeUnflagged` で末尾に出す）。当たる行がなければ Empty を出す。
+ * - 行の項目は関数（`getDueDate` など）か列名（`dueDateKey` など）で渡す。列名は JSON で書けるので、下書きはこちらを使う。
+ *   両方あれば関数が先。どちらも無ければ、期日・動き・リスクは「無い」として判定せず、行の ID は行の順番、見出しは空になる。
+ * - 行を押すと `onRowClick(row)` を呼ぶ。渡さなければ押せない行（button ではなく li）になる。
+ *
+ * @example
+ * import { AttentionList } from "@/components/attention-list"
+ * // Vantage: import { AttentionList } from "@squadbase/vantage/components"
+ *
+ * <AttentionList
+ *   rows={receivables}
+ *   asOf="2026-10-23"
+ *   dueSoonDays={7}
+ *   getRowId={(r) => r.id}
+ *   getTitle={(r) => r.customer}
+ *   getDueDate={(r) => r.dueDate}
+ *   getNextAction={(r) => r.nextAction}
+ *   onRowClick={(r) => openDetail(r.id)}
+ * />
+ */
+import { differenceInCalendarDays, parseISO } from "date-fns"
+import { useMemo, type HTMLAttributes, type ReactNode } from "react"
+
+import { formatDate } from "@squadbase/vantage/components"
+import { cn } from "@squadbase/vantage/ui"
+import { Empty } from "@squadbase/vantage/ui"
+import { StatusBadge } 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 ---------- */
+
+export type AttentionKind = "overdue" | "risk" | "dueSoon" | "stale"
+
+/** 強い順。並びと、複数に当たったときの採用に使う。 */
+const KIND_ORDER: readonly AttentionKind[] = ["overdue", "risk", "dueSoon", "stale"]
+
+const KIND_TONES: Record<AttentionKind, string> = {
+  overdue: "negative",
+  risk: "negative",
+  dueSoon: "warning",
+  stale: "info",
+}
+
+const daysEn = (n: number) => (n === 1 ? "1 day" : `${n} days`)
+
+const TEXT = {
+  ja: {
+    labels: { overdue: "期日超過", risk: "リスク", dueSoon: "期限間近", stale: "滞留" } as Record<AttentionKind, string>,
+    overdue: (days: number) => `期日を ${days} 日過ぎています`,
+    dueToday: "期日は今日です",
+    dueIn: (days: number) => `期日まであと ${days} 日です`,
+    stale: (days: number) => `${days} 日間動きがありません`,
+    empty: "対応が必要な項目はありません",
+    due: "期日",
+    nextAction: "次の一手: ",
+  },
+  en: {
+    labels: { overdue: "Overdue", risk: "At risk", dueSoon: "Due soon", stale: "Stalled" } as Record<AttentionKind, string>,
+    overdue: (days: number) => `${daysEn(days)} overdue`,
+    dueToday: "Due today",
+    dueIn: (days: number) => `Due in ${daysEn(days)}`,
+    stale: (days: number) => `No activity for ${daysEn(days)}`,
+    empty: "Nothing needs attention",
+    due: "Due",
+    nextAction: "Next step: ",
+  },
+} satisfies Record<UiLanguage, unknown>
+
+/** The category names in English (the fallback language). The list picks the page's language (`<html lang>`); ja reads 期日超過 / リスク / 期限間近 / 滞留. */
+export const DEFAULT_ATTENTION_LABELS: Record<AttentionKind, string> = TEXT.en.labels
+
+/** The category names in `locale`'s language (default the page's, `<html lang>`). */
+export function attentionLabels(locale?: string): Record<AttentionKind, string> {
+  return TEXT[uiLanguage(resolveLocale(locale))].labels
+}
+
+type DateInput = Date | string | null | undefined
+
+export interface AttentionJudgement {
+  kind: AttentionKind
+  /**
+   * overdue: 期日を過ぎた日数（1 以上）／ dueSoon: 期日までの日数（0 = 当日）／
+   * stale: 最終の動きからの日数／ risk: 0。
+   */
+  days: number
+}
+
+export interface JudgeAttentionInput {
+  /** 期日。無ければ期日の判定（超過・間近）はしない。 */
+  dueDate?: DateInput
+  /** 最後に動きがあった日。無ければ滞留の判定はしない。 */
+  lastActivityAt?: DateInput
+  /** 呼び元がリスクと判定した行。 */
+  risk?: boolean
+  /** 基準日。必ず渡す（部品の内で「今日」を決めない）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。当日を含み、この日数ちょうども含む。既定 7。 */
+  dueSoonDays?: number
+  /** 何日動きがなければ「滞留」にするか。この日数ちょうどから滞留。未指定なら滞留は判定しない。 */
+  staleDays?: number
+}
+
+function toDate(value: DateInput): Date | null {
+  if (value === null || value === undefined || value === "") return null
+  const date = typeof value === "string" ? parseISO(value) : value
+  return Number.isFinite(date.getTime()) ? date : null
+}
+
+/**
+ * 1 行が要対応かを判定する。当たらなければ `null`。日数は暦日（時刻は無視）で数える。
+ * 期日の当日は「超過」ではなく「期限間近（0 日）」。
+ */
+export function judgeAttention(input: JudgeAttentionInput): AttentionJudgement | null {
+  const asOf = toDate(input.asOf)
+  if (!asOf) return null
+  const dueSoonDays = input.dueSoonDays ?? 7
+
+  const due = toDate(input.dueDate)
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue < 0) return { kind: "overdue", days: -untilDue }
+  }
+  if (input.risk) return { kind: "risk", days: 0 }
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue <= dueSoonDays) return { kind: "dueSoon", days: untilDue }
+  }
+  const last = toDate(input.lastActivityAt)
+  if (last && input.staleDays !== undefined) {
+    const idle = differenceInCalendarDays(asOf, last)
+    if (idle >= input.staleDays) return { kind: "stale", days: idle }
+  }
+  return null
+}
+
+/** 区分の強さ → 日数の大きい順（dueSoon は期日が近い順）。同順位は 0 を返し、元の順を保つ。 */
+export function compareAttention(a: AttentionJudgement | null, b: AttentionJudgement | null): number {
+  if (!a || !b) return a ? -1 : b ? 1 : 0
+  const byKind = KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind)
+  if (byKind !== 0) return byKind
+  return a.kind === "dueSoon" ? a.days - b.days : b.days - a.days
+}
+
+function defaultReason(j: AttentionJudgement, labels: Record<AttentionKind, string>, t: (typeof TEXT)[UiLanguage]): string {
+  switch (j.kind) {
+    case "overdue":
+      return t.overdue(j.days)
+    case "dueSoon":
+      return j.days === 0 ? t.dueToday : t.dueIn(j.days)
+    case "stale":
+      return t.stale(j.days)
+    case "risk":
+      return labels.risk
+  }
+}
+
+export interface AttentionListProps<T> {
+  rows: T[]
+  /** 基準日（`"2026-10-23"` か Date）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。既定 7。 */
+  dueSoonDays?: number
+  /** この日数動きがなければ「滞留」。未指定なら滞留は判定しない。 */
+  staleDays?: number
+  /** 区分名の差し替え（例: `{ overdue: "入金遅れ" }`）。 */
+  labels?: Partial<Record<AttentionKind, string>>
+  /** 行の ID。省略時は `idKey` の列、それも無ければ行の順番。 */
+  getRowId?: (row: T) => string
+  /** 行の見出し（顧客名・案件名など）。省略時は `titleKey` の列、それも無ければ空。 */
+  getTitle?: (row: T) => ReactNode
+  getDueDate?: (row: T) => DateInput
+  getLastActivityAt?: (row: T) => DateInput
+  /** リスクと判定する行。期日・滞留より先に出す。 */
+  isRisk?: (row: T) => boolean
+  /** 行の ID の列名（JSON で書ける `getRowId`）。 */
+  idKey?: string
+  /** 見出しの列名（JSON で書ける `getTitle`）。 */
+  titleKey?: string
+  /** 期日の列名（JSON で書ける `getDueDate`）。値は `"2026-10-23"` 形式の日付か Date。 */
+  dueDateKey?: string
+  /** 最後に動きがあった日の列名（JSON で書ける `getLastActivityAt`）。 */
+  lastActivityAtKey?: string
+  /** リスクの列名（JSON で書ける `isRisk`）。値が真の行をリストにする。 */
+  riskKey?: string
+  /** 次の一手の列名（JSON で書ける `getNextAction`）。値が空の行には添えない。 */
+  nextActionKey?: string
+  /** 理由の文。省略すると区分と日数から作る。 */
+  getReason?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 次の一手。判定に当たる行に添える。 */
+  getNextAction?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 見出しの右に出す補足（金額・担当者など）。 */
+  getMeta?: (row: T) => ReactNode
+  /** 行を押したとき。渡すと行が button になる。 */
+  onRowClick?: (row: T) => void
+  /** 判定に当たらない行も末尾に出す。既定 false。 */
+  includeUnflagged?: boolean
+  /** 該当なしのときの見出し・説明。 */
+  emptyTitle?: string
+  emptyDescription?: string
+  className?: string
+}
+
+function cell(row: unknown, key: string | undefined): unknown {
+  if (!key || row === null || typeof row !== "object") return undefined
+  return (row as Record<string, unknown>)[key]
+}
+
+function asDateInput(value: unknown): DateInput {
+  return typeof value === "string" || value instanceof Date ? value : undefined
+}
+
+function asNode(value: unknown): ReactNode {
+  return typeof value === "string" || typeof value === "number" ? value : null
+}
+
+export function AttentionList<T>({
+  rows,
+  asOf,
+  dueSoonDays,
+  staleDays,
+  labels,
+  getRowId,
+  getTitle,
+  getDueDate,
+  getLastActivityAt,
+  isRisk,
+  idKey,
+  titleKey,
+  dueDateKey,
+  lastActivityAtKey,
+  riskKey,
+  nextActionKey,
+  getReason,
+  getNextAction,
+  getMeta,
+  onRowClick,
+  includeUnflagged = false,
+  emptyTitle,
+  emptyDescription,
+  className,
+  ...rest
+}: AttentionListProps<T> & Omit<HTMLAttributes<HTMLUListElement>, keyof AttentionListProps<T>>) {
+  const locale = useLocale()
+  const t = TEXT[uiLanguage(locale)]
+  const mergedLabels = useMemo(() => ({ ...t.labels, ...labels }), [t, labels])
+  const colorMap = KIND_TONES
+  const dueOf = (row: T) => (getDueDate ? getDueDate(row) : asDateInput(cell(row, dueDateKey)))
+  const nextActionOf = (row: T, j: AttentionJudgement): ReactNode =>
+    getNextAction ? getNextAction(row, j) : asNode(cell(row, nextActionKey))
+
+  // アクセサは呼び元の判定そのものなので、rows が同じ参照でも毎回かけ直す（メモ化すると古い判定が残る）
+  const items = (rows ?? [])
+    .map((row, index) => ({
+      row,
+      index,
+      judgement: judgeAttention({
+        dueDate: dueOf(row),
+        lastActivityAt: getLastActivityAt ? getLastActivityAt(row) : asDateInput(cell(row, lastActivityAtKey)),
+        risk: isRisk ? isRisk(row) : Boolean(cell(row, riskKey)),
+        asOf,
+        dueSoonDays,
+        staleDays,
+      }),
+    }))
+    .filter((item) => includeUnflagged || item.judgement)
+    .sort((a, b) => compareAttention(a.judgement, b.judgement) || a.index - b.index)
+
+  if (items.length === 0) {
+    return <Empty title={emptyTitle ?? t.empty} description={emptyDescription} className={className} />
+  }
+
+  return (
+    <ul data-slot="attention-list" className={cn("divide-y divide-border", className)} {...rest}>
+      {items.map(({ row, index, judgement }) => {
+        const due = dueOf(row)
+        const body = (
+          <>
+            <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+              {judgement && (
+                <StatusBadge status={judgement.kind} label={mergedLabels[judgement.kind]} colorMap={colorMap} />
+              )}
+              <span className="min-w-0 font-medium">{getTitle ? getTitle(row) : asNode(cell(row, titleKey))}</span>
+              {getMeta && <span className="text-sm tabular-nums text-muted-foreground">{getMeta(row)}</span>}
+              {due ? (
+                <span className="ml-auto text-sm tabular-nums text-muted-foreground">
+                  {t.due} {formatDate(due, "date", locale)}
+                </span>
+              ) : null}
+            </div>
+            {judgement && (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels, t)}
+              </p>
+            )}
+            {judgement && (getNextAction || nextActionKey) && nextActionOf(row, judgement) ? (
+              <p className="mt-1 text-sm">
+                <span className="text-muted-foreground">{t.nextAction}</span>
+                {nextActionOf(row, judgement)}
+              </p>
+            ) : null}
+          </>
+        )
+        return (
+          <li key={getRowId ? getRowId(row) : String(cell(row, idKey) ?? index)} data-slot="attention-list-row">
+            {onRowClick ? (
+              <button
+                type="button"
+                onClick={() => onRowClick(row)}
+                className="block w-full px-3 py-3 text-left transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {body}
+              </button>
+            ) : (
+              <div className="px-3 py-3">{body}</div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+AttentionList.displayName = "AttentionList"

package/registry/ui/avatar.tsx

@@ -0,0 +1,110 @@
+// Copied by `vantage add ui avatar`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/avatar.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "@squadbase/vantage/ui"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/registry/ui/badge.tsx

@@ -0,0 +1,56 @@
+// Copied by `vantage add ui badge`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/badge.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }