@squadbase/vantage 0.6.2 → 0.7.0-dev1.19083f7

package/registry/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+// Copied by `vantage add ui scroll-area`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/scroll-area.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@squadbase/vantage/ui"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/registry/ui/searchable-select.tsx

@@ -0,0 +1,352 @@
+// Copied by `vantage add ui searchable-select`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/searchable-select.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * SearchableSelect — a single-select combobox with a filter box. Filtering runs
+ * client-side over the given options; pass `onSearch` to take it over yourself
+ * (server-side search), which turns the built-in filter off.
+ */
+import { forwardRef, useMemo, useState } from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
+import { flattenOptions, type SelectOptions } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+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 @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
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/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 SearchableSelectProps {
+  options: SelectOptions
+  value?: string
+  onChange?: (value: string | undefined) => void
+  onSearch?: (query: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  isLoading?: boolean
+  disabled?: boolean
+  clearable?: boolean
+  className?: string
+}
+
+const TEXT = {
+  ja: { placeholder: "選択してください", search: "検索...", empty: "見つかりませんでした", clear: "クリア" },
+  en: { placeholder: "Select an option", search: "Search...", empty: "No results found.", clear: "Clear" },
+}
+
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_OPTIONS: never[] = []
+
+export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps>(
+  function SearchableSelect(
+    {
+      options = NO_OPTIONS,
+      value,
+      onChange,
+      onSearch,
+      placeholder,
+      searchPlaceholder,
+      emptyText,
+      isLoading = false,
+      disabled = false,
+      clearable = true,
+      className,
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false)
+    const t = TEXT[uiLanguage(useLocale())]
+
+    const allOptions = useMemo(() => flattenOptions(options), [options])
+    const selectedOption = useMemo(
+      () => allOptions.find((opt) => opt.value === value),
+      [allOptions, value],
+    )
+
+    function handleSelect(selectedValue: string) {
+      onChange?.(selectedValue === value ? undefined : selectedValue)
+      setOpen(false)
+    }
+
+    return (
+      <div ref={ref} data-slot="searchable-select">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger
+            render={
+              <Button
+                variant="outline"
+                disabled={disabled}
+                className={cn(
+                  "w-full justify-between font-normal",
+                  !selectedOption && "text-muted-foreground",
+                  className,
+                )}
+              />
+            }
+            role="combobox"
+            aria-expanded={open}
+          >
+            <span className="truncate">{selectedOption ? selectedOption.label : (placeholder ?? t.placeholder)}</span>
+            <span className="flex shrink-0 items-center gap-1">
+              {clearable && value && (
+                <RemoveButton label={t.clear} onRemove={() => onChange?.(undefined)} />
+              )}
+              <ChevronDownIcon className="size-4 opacity-50" />
+            </span>
+          </PopoverTrigger>
+          <PopoverContent className="w-(--anchor-width) p-0" align="start">
+            <OptionCommandList
+              options={options}
+              isSelected={(v) => value === v}
+              onSelect={handleSelect}
+              onSearch={onSearch}
+              isLoading={isLoading}
+              searchPlaceholder={searchPlaceholder ?? t.search}
+              emptyText={emptyText ?? t.empty}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
+  },
+)
+SearchableSelect.displayName = "SearchableSelect"

package/registry/ui/section-header.tsx

@@ -0,0 +1,43 @@
+// Copied by `vantage add ui section-header`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/section-header.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * SectionHeader — a titled divider inside a page: heading, optional
+ * description, and right-aligned actions that wrap below on narrow screens.
+ */
+import { forwardRef, type ReactNode } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+
+const headingStyles = {
+  h1: "text-3xl font-bold tracking-tight",
+  h2: "text-base font-semibold tracking-tight",
+  h3: "text-base font-semibold",
+  h4: "text-lg font-semibold",
+} as const
+
+export interface SectionHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+  className?: string
+  as?: keyof typeof headingStyles
+}
+
+export const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(
+  ({ title, description, actions, className, as: Comp = "h2" }, ref) => (
+    <div
+      ref={ref}
+      data-slot="section-header"
+      className={cn("flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", className)}
+    >
+      <div>
+        <Comp className={headingStyles[Comp]}>{title}</Comp>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+      </div>
+      {actions && <div className="shrink-0">{actions}</div>}
+    </div>
+  ),
+)
+SectionHeader.displayName = "SectionHeader"

package/registry/ui/segmented-control.tsx

@@ -0,0 +1,76 @@
+// Copied by `vantage add ui segmented-control`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/segmented-control.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * SegmentedControl — a single-select row of buttons over `ToggleGroup`. Base
+ * UI's toggle group is multi-value by default, so this wrapper narrows it to
+ * one value and refuses to deselect the active segment.
+ */
+import { forwardRef } from "react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+import type { SegmentOption } from "@squadbase/vantage/components"
+
+const iconSizes = {
+  sm: "size-3.5",
+  default: "size-4",
+  lg: "size-5",
+} as const
+
+export interface SegmentedControlProps {
+  options: SegmentOption[]
+  value: string
+  onChange: (value: string) => void
+  size?: keyof typeof iconSizes
+  fullWidth?: boolean
+  ariaLabel?: string
+  className?: string
+}
+
+/** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
+const NO_OPTIONS: never[] = []
+
+export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  function SegmentedControl(
+    { options = NO_OPTIONS, value, onChange, size = "default", fullWidth = false, ariaLabel, className },
+    ref,
+  ) {
+    return (
+      <ToggleGroup
+        ref={ref}
+        data-slot="segmented-control"
+        value={[value]}
+        onValueChange={(next) => {
+          // Base UI reports the full pressed set; keep the newly added segment
+          // and ignore the empty set so the control never loses its selection.
+          const picked = next.find((item) => item !== value) ?? next[0]
+          if (typeof picked === "string") onChange(picked)
+        }}
+        variant="outline"
+        size={size}
+        spacing={0}
+        aria-label={ariaLabel}
+        className={cn(fullWidth && "w-full", className)}
+      >
+        {options.map((option) => {
+          const Icon = option.icon
+          return (
+            <ToggleGroupItem
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+              aria-label={option.label}
+              className={cn(fullWidth && "flex-1")}
+            >
+              {Icon && <Icon className={iconSizes[size]} aria-hidden="true" />}
+              {option.label}
+            </ToggleGroupItem>
+          )
+        })}
+      </ToggleGroup>
+    )
+  },
+)
+SegmentedControl.displayName = "SegmentedControl"