@squadbase/vantage 0.6.2-dev1.9d91dda → 0.6.2-dev1.ac99e02

package/registry/ui/metric-value.tsx

@@ -0,0 +1,54 @@
+// Copied by `vantage add ui metric-value`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/metric-value.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * MetricValue / MetricUnit — the large number in a dashboard tile and its
+ * trailing unit, sized as a pair so the unit stays subordinate at every size.
+ */
+import { forwardRef, type HTMLAttributes } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+
+export const metricValueVariants = cva("font-medium tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-base",
+      md: "text-2xl",
+      lg: "text-3xl",
+      xl: "text-4xl",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})
+
+export interface MetricValueProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof metricValueVariants> {}
+
+export const MetricValue = forwardRef<HTMLDivElement, MetricValueProps>(
+  ({ className, size, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="metric-value"
+      className={cn("my-4", metricValueVariants({ size }), className)}
+      {...props}
+    />
+  ),
+)
+MetricValue.displayName = "MetricValue"
+
+export interface MetricUnitProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const MetricUnit = forwardRef<HTMLSpanElement, MetricUnitProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="metric-unit"
+      className={cn("text-sm font-normal text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+)
+MetricUnit.displayName = "MetricUnit"

package/registry/ui/multi-select.tsx

@@ -0,0 +1,226 @@
+// Copied by `vantage add ui multi-select`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/multi-select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * MultiSelect — a multi-value combobox that shows the selection as removable
+ * badges. Past `maxCount` badges the rest collapse into a "+N件" counter.
+ * Pass `onSearch` to take filtering over yourself (server-side search).
+ */
+import { forwardRef, useId, useMemo, useState } from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Badge } from "@squadbase/vantage/ui"
+import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
+import { flattenOptions, type SelectOptions } from "@squadbase/vantage/components"
+import type { KeyboardEvent, MouseEvent } from "react"
+import { CheckIcon, LoaderIcon, XIcon } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@squadbase/vantage/ui"
+import { isGroupedOptions, type SelectOption } from "@squadbase/vantage/components"
+
+/* ---------- inlined from src/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
+
+interface OptionCommandListProps {
+  options: SelectOptions
+  /** Whether the given option value is currently selected (drives the check). */
+  isSelected: (value: string) => boolean
+  onSelect: (value: string) => void
+  /** Take filtering over yourself (server-side search); turns off built-in filter. */
+  onSearch?: (query: string) => void
+  isLoading: boolean
+  searchPlaceholder: string
+  emptyText: string
+}
+
+/** The searchable list body — flat or grouped, with loading and empty states. */
+function OptionCommandList({
+  options,
+  isSelected,
+  onSelect,
+  onSearch,
+  isLoading,
+  searchPlaceholder,
+  emptyText,
+}: OptionCommandListProps) {
+  const renderOptions = (items: SelectOption[]) =>
+    items.map((option) => (
+      <CommandItem
+        key={option.value}
+        value={option.value}
+        keywords={[option.label]}
+        disabled={option.disabled}
+        onSelect={onSelect}
+      >
+        {option.icon && <option.icon className="size-4 shrink-0" />}
+        <span className="flex-1 truncate">
+          {option.label}
+          {option.description && (
+            <span className="ml-2 text-xs text-muted-foreground">{option.description}</span>
+          )}
+        </span>
+        <CheckIcon
+          className={cn("size-4 shrink-0", isSelected(option.value) ? "opacity-100" : "opacity-0")}
+        />
+      </CommandItem>
+    ))
+
+  return (
+    <Command shouldFilter={!onSearch}>
+      <CommandInput placeholder={searchPlaceholder} onValueChange={onSearch} />
+      <CommandList>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-6">
+            <LoaderIcon className="size-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {isGroupedOptions(options)
+              ? options.map((group) => (
+                  <CommandGroup key={group.label} heading={group.label}>
+                    {renderOptions(group.options)}
+                  </CommandGroup>
+                ))
+              : renderOptions(options)}
+          </>
+        )}
+      </CommandList>
+    </Command>
+  )
+}
+
+interface RemoveButtonProps {
+  label: string
+  /** Runs on click and on Enter/Space; propagation is stopped for you. */
+  onRemove: () => void
+  /** Override the X icon size (default `size-3.5`). */
+  iconClassName?: string
+}
+
+/** The keyboard-accessible ×-affordance inside a badge or trigger. */
+function RemoveButton({ label, onRemove, iconClassName }: RemoveButtonProps) {
+  const handle = (e: MouseEvent | KeyboardEvent) => {
+    e.stopPropagation()
+    onRemove()
+  }
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      aria-label={label}
+      className="rounded-sm opacity-50 hover:opacity-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+      onClick={handle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") handle(e)
+      }}
+    >
+      <XIcon className={cn("size-3.5", iconClassName)} />
+    </span>
+  )
+}
+
+/* ---------- end of inlined code ---------- */
+
+export interface MultiSelectProps {
+  options: SelectOptions
+  value: string[]
+  onChange?: (value: string[]) => void
+  onSearch?: (query: string) => void
+  maxCount?: number
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  isLoading?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+export const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(
+  {
+    options,
+    value,
+    onChange,
+    onSearch,
+    maxCount = 3,
+    placeholder = "選択してください",
+    searchPlaceholder = "検索...",
+    emptyText = "見つかりませんでした",
+    isLoading = false,
+    disabled = false,
+    className,
+  },
+  ref,
+) {
+  const [open, setOpen] = useState(false)
+  const listId = useId()
+
+  const allOptions = useMemo(() => flattenOptions(options), [options])
+  const selectedOptions = useMemo(
+    () => allOptions.filter((opt) => value.includes(opt.value)),
+    [allOptions, value],
+  )
+
+  function handleSelect(selectedValue: string) {
+    if (value.includes(selectedValue)) {
+      onChange?.(value.filter((v) => v !== selectedValue))
+    } else {
+      onChange?.([...value, selectedValue])
+    }
+  }
+
+  const visibleBadges = selectedOptions.slice(0, maxCount)
+  const overflowCount = selectedOptions.length - maxCount
+
+  return (
+    <div ref={ref} data-slot="multi-select">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listId}
+          disabled={disabled}
+          className={cn(
+            "inline-flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            className,
+          )}
+        >
+          <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+            {selectedOptions.length === 0 ? (
+              <span className="text-muted-foreground">{placeholder}</span>
+            ) : (
+              <>
+                {visibleBadges.map((option) => (
+                  <Badge key={option.value} variant="secondary" className="shrink-0 gap-1 pr-1">
+                    <span className="max-w-[120px] truncate">{option.label}</span>
+                    <RemoveButton
+                      label={`${option.label}を削除`}
+                      onRemove={() => onChange?.(value.filter((v) => v !== option.value))}
+                      iconClassName="size-3"
+                    />
+                  </Badge>
+                ))}
+                {overflowCount > 0 && (
+                  <Badge variant="secondary" className="shrink-0">
+                    +{overflowCount}件
+                  </Badge>
+                )}
+              </>
+            )}
+          </span>
+          <ChevronDownIcon className="size-4 shrink-0 opacity-50" />
+        </PopoverTrigger>
+        <PopoverContent id={listId} className="w-(--anchor-width) p-0" align="start">
+          <OptionCommandList
+            options={options}
+            isSelected={(v) => value.includes(v)}
+            onSelect={handleSelect}
+            onSearch={onSearch}
+            isLoading={isLoading}
+            searchPlaceholder={searchPlaceholder}
+            emptyText={emptyText}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+})
+MultiSelect.displayName = "MultiSelect"

package/registry/ui/page-shell.tsx

@@ -0,0 +1,227 @@
+// Copied by `vantage add ui page-shell`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/page-shell.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * PageShell — the standard page frame: a bordered header band (title,
+ * description, meta, actions), an optional summary card row, and the content
+ * area. Composed from parts so a page can use only what it needs.
+ */
+import { forwardRef, type HTMLAttributes } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+
+export interface PageShellProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShell = forwardRef<HTMLDivElement, PageShellProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="page-shell" className={cn("flex flex-col", className)} {...props} />
+  ),
+)
+PageShell.displayName = "PageShell"
+
+export interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * A wrapping flex row, not a two-column grid: when the heading cannot keep its
+ * 20rem basis next to `PageShellHeaderEnd`, the end block drops below it. A
+ * `1fr auto` grid would instead hand the heading whatever the end block leaves,
+ * and a CJK title — breakable between any two characters — collapses into a
+ * one-character column.
+ */
+export const PageShellHeader = forwardRef<HTMLDivElement, PageShellHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-header"
+      className={cn("flex flex-wrap items-start gap-x-4 gap-y-6 border-b px-6 py-12", className)}
+      {...props}
+    />
+  ),
+)
+PageShellHeader.displayName = "PageShellHeader"
+
+export interface PageShellHeadingProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellHeading = forwardRef<HTMLDivElement, PageShellHeadingProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-heading"
+      className={cn("min-w-0 grow basis-80", className)}
+      {...props}
+    />
+  ),
+)
+PageShellHeading.displayName = "PageShellHeading"
+
+export interface PageShellTitleProps extends HTMLAttributes<HTMLHeadingElement> {}
+
+export const PageShellTitle = forwardRef<HTMLHeadingElement, PageShellTitleProps>(
+  ({ className, ...props }, ref) => (
+    <h1
+      ref={ref}
+      data-slot="page-shell-title"
+      className={cn("text-2xl font-bold tracking-tight text-foreground", className)}
+      {...props}
+    />
+  ),
+)
+PageShellTitle.displayName = "PageShellTitle"
+
+export interface PageShellDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {}
+
+export const PageShellDescription = forwardRef<HTMLParagraphElement, PageShellDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      data-slot="page-shell-description"
+      className={cn("mt-1 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+)
+PageShellDescription.displayName = "PageShellDescription"
+
+export interface PageShellHeaderEndProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellHeaderEnd = forwardRef<HTMLDivElement, PageShellHeaderEndProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-header-end"
+      className={cn("flex max-w-full shrink-0 flex-col flex-wrap items-end gap-2", className)}
+      {...props}
+    />
+  ),
+)
+PageShellHeaderEnd.displayName = "PageShellHeaderEnd"
+
+export interface PageShellMetaProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellMeta = forwardRef<HTMLDivElement, PageShellMetaProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-meta"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+)
+PageShellMeta.displayName = "PageShellMeta"
+
+export interface PageShellActionsProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellActions = forwardRef<HTMLDivElement, PageShellActionsProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  ),
+)
+PageShellActions.displayName = "PageShellActions"
+
+export interface PageShellSummaryProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellSummary = forwardRef<HTMLDivElement, PageShellSummaryProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-summary"
+      className={cn(
+        "grid basis-full grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+PageShellSummary.displayName = "PageShellSummary"
+
+/**
+ * Accent colours are spelled out one utility set per colour rather than built
+ * from a template string — Tailwind only emits classes it can see literally in
+ * the source.
+ */
+export const pageShellSummaryCardVariants = cva(
+  "relative flex items-start gap-3 rounded-lg border bg-background px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      accent: {
+        default: "text-card-foreground",
+        accent:
+          "border-[var(--chart-1)]/30 bg-linear-to-r from-[var(--chart-1)]/5 to-[var(--chart-1)]/5 [&>svg]:text-[var(--chart-1)]",
+        amber:
+          "border-amber-300 bg-amber-50 [&>svg]:text-amber-600 dark:border-amber-800 dark:bg-amber-950/50 dark:[&>svg]:text-amber-400",
+        blue: "border-blue-300 bg-blue-50 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950/50 dark:[&>svg]:text-blue-400",
+        emerald:
+          "border-emerald-300 bg-emerald-50 [&>svg]:text-emerald-600 dark:border-emerald-800 dark:bg-emerald-950/50 dark:[&>svg]:text-emerald-400",
+        red: "border-red-300 bg-red-50 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950/50 dark:[&>svg]:text-red-400",
+        violet:
+          "border-violet-300 bg-violet-50 [&>svg]:text-violet-600 dark:border-violet-800 dark:bg-violet-950/50 dark:[&>svg]:text-violet-400",
+        orange:
+          "border-orange-300 bg-orange-50 [&>svg]:text-orange-600 dark:border-orange-800 dark:bg-orange-950/50 dark:[&>svg]:text-orange-400",
+        cyan: "border-cyan-300 bg-cyan-50 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950/50 dark:[&>svg]:text-cyan-400",
+        slate:
+          "border-slate-300 bg-slate-50 [&>svg]:text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:[&>svg]:text-slate-400",
+        green:
+          "border-green-300 bg-green-50 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950/50 dark:[&>svg]:text-green-400",
+        teal: "border-teal-300 bg-teal-50 [&>svg]:text-teal-600 dark:border-teal-800 dark:bg-teal-950/50 dark:[&>svg]:text-teal-400",
+        sky: "border-sky-300 bg-sky-50 [&>svg]:text-sky-600 dark:border-sky-800 dark:bg-sky-950/50 dark:[&>svg]:text-sky-400",
+        indigo:
+          "border-indigo-300 bg-indigo-50 [&>svg]:text-indigo-600 dark:border-indigo-800 dark:bg-indigo-950/50 dark:[&>svg]:text-indigo-400",
+        purple:
+          "border-purple-300 bg-purple-50 [&>svg]:text-purple-600 dark:border-purple-800 dark:bg-purple-950/50 dark:[&>svg]:text-purple-400",
+        pink: "border-pink-300 bg-pink-50 [&>svg]:text-pink-600 dark:border-pink-800 dark:bg-pink-950/50 dark:[&>svg]:text-pink-400",
+        rose: "border-rose-300 bg-rose-50 [&>svg]:text-rose-600 dark:border-rose-800 dark:bg-rose-950/50 dark:[&>svg]:text-rose-400",
+        yellow:
+          "border-yellow-300 bg-yellow-50 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950/50 dark:[&>svg]:text-yellow-400",
+        lime: "border-lime-300 bg-lime-50 [&>svg]:text-lime-600 dark:border-lime-800 dark:bg-lime-950/50 dark:[&>svg]:text-lime-400",
+        gray: "border-gray-300 bg-gray-50 [&>svg]:text-gray-600 dark:border-gray-800 dark:bg-gray-950/50 dark:[&>svg]:text-gray-400",
+        zinc: "border-zinc-300 bg-zinc-50 [&>svg]:text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/50 dark:[&>svg]:text-zinc-400",
+        neutral:
+          "border-neutral-300 bg-neutral-50 [&>svg]:text-neutral-600 dark:border-neutral-800 dark:bg-neutral-950/50 dark:[&>svg]:text-neutral-400",
+        stone:
+          "border-stone-300 bg-stone-50 [&>svg]:text-stone-600 dark:border-stone-800 dark:bg-stone-950/50 dark:[&>svg]:text-stone-400",
+        fuchsia:
+          "border-fuchsia-300 bg-fuchsia-50 [&>svg]:text-fuchsia-600 dark:border-fuchsia-800 dark:bg-fuchsia-950/50 dark:[&>svg]:text-fuchsia-400",
+      },
+    },
+    defaultVariants: {
+      accent: "default",
+    },
+  },
+)
+
+export interface PageShellSummaryCardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof pageShellSummaryCardVariants> {}
+
+export const PageShellSummaryCard = forwardRef<HTMLDivElement, PageShellSummaryCardProps>(
+  ({ className, accent, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-summary-card"
+      className={cn(pageShellSummaryCardVariants({ accent }), className)}
+      {...props}
+    />
+  ),
+)
+PageShellSummaryCard.displayName = "PageShellSummaryCard"
+
+export interface PageShellContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const PageShellContent = forwardRef<HTMLDivElement, PageShellContentProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="page-shell-content"
+      className={cn("flex-1 p-6", className)}
+      {...props}
+    />
+  ),
+)
+PageShellContent.displayName = "PageShellContent"

package/registry/ui/pagination.tsx

@@ -0,0 +1,138 @@
+// Copied by `vantage add ui pagination`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/pagination.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+import * as React from "react"
+import { cn } from "@squadbase/vantage/ui"
+
+import { Button } from "@squadbase/vantage/ui"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon
+        data-icon="inline-start"
+        className="cn-rtl-flip"
+      />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon
+        data-icon="inline-end"
+        className="cn-rtl-flip"
+      />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/registry/ui/placeholder.tsx

@@ -0,0 +1,30 @@
+// Copied by `vantage add ui placeholder`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/placeholder.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * Placeholder — marks sample (not-yet-real) data on a template screen.
+ *
+ * Renders an inline `<span>`, so it is safe inside headings and descriptions
+ * (unlike `Skeleton`, which is a block `<div>`). The `animate-pulse` + muted
+ * styling signals "this is placeholder data — swap in your real values".
+ * Override size/weight through `className` (e.g. `text-2xl font-bold`).
+ */
+import { forwardRef, type HTMLAttributes } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+
+export interface PlaceholderProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const Placeholder = forwardRef<HTMLSpanElement, PlaceholderProps>(function Placeholder(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      data-slot="placeholder"
+      className={cn("inline-block animate-pulse text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+Placeholder.displayName = "Placeholder"