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

package/registry/ui/searchable-select.tsx

@@ -0,0 +1,209 @@
+// Copied by `vantage add ui searchable-select`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/searchable-select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * 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 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 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
+}
+
+export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps>(
+  function SearchableSelect(
+    {
+      options,
+      value,
+      onChange,
+      onSearch,
+      placeholder = "選択してください",
+      searchPlaceholder = "検索...",
+      emptyText = "見つかりませんでした",
+      isLoading = false,
+      disabled = false,
+      clearable = true,
+      className,
+    },
+    ref,
+  ) {
+    const [open, setOpen] = useState(false)
+
+    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}</span>
+            <span className="flex shrink-0 items-center gap-1">
+              {clearable && value && (
+                <RemoveButton label="クリア" 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}
+              emptyText={emptyText}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
+  },
+)
+SearchableSelect.displayName = "SearchableSelect"

package/registry/ui/section-header.tsx

@@ -0,0 +1,41 @@
+// Copied by `vantage add ui section-header`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/section-header.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * 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-2xl font-semibold tracking-tight",
+  h3: "text-xl 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,71 @@
+// Copied by `vantage add ui segmented-control`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/segmented-control.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * 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
+}
+
+export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  function SegmentedControl(
+    { 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"

package/registry/ui/select.tsx

@@ -0,0 +1,253 @@
+// Copied by `vantage add ui select`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/select.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@squadbase/vantage/ui"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+type DerivedSelectItem = { label: React.ReactNode; value: unknown }
+
+/**
+ * Collect every reachable `SelectItem`'s `value` → children pair.
+ *
+ * Base UI's `Select.Value` renders the selected *value*, not the matching
+ * item's children — without `items` the trigger shows a raw `"kanto"` where the
+ * list says "関東". Deriving `items` from the children here means the ordinary
+ * case is right by default. The walk only sees `SelectItem` elements present in
+ * this tree, so options produced by an intermediate component still need
+ * `items` passed explicitly (an explicit `items` always wins).
+ */
+function collectSelectItems(
+  node: React.ReactNode,
+  into: DerivedSelectItem[] = [],
+): DerivedSelectItem[] {
+  React.Children.forEach(node, (child) => {
+    if (!React.isValidElement(child)) return
+    const props = child.props as { value?: unknown; children?: React.ReactNode }
+    if (child.type === SelectItem) {
+      if (props.value !== undefined) into.push({ label: props.children, value: props.value })
+      return
+    }
+    if (props.children !== undefined) collectSelectItems(props.children, into)
+  })
+  return into
+}
+
+function Select<Value, Multiple extends boolean | undefined = false>({
+  items,
+  children,
+  ...props
+}: SelectPrimitive.Root.Props<Value, Multiple>) {
+  const derivedItems = React.useMemo(() => {
+    if (items) return items
+    const collected = collectSelectItems(children)
+    return collected.length > 0 ? collected : undefined
+  }, [items, children])
+
+  return (
+    <SelectPrimitive.Root<Value, Multiple> items={derivedItems} {...props}>
+      {children}
+    </SelectPrimitive.Root>
+  )
+}
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn(
+            "cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in 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}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      {/*
+        `line-clamp-1` rather than `truncate`: the item's width is capped by the
+        popup (`--anchor-width`), and a label longer than that must stop before
+        the `pr-8` reserved for the check indicator. `text-overflow: ellipsis`
+        does not apply to a flex container's anonymous text, so it would clip
+        without an ellipsis; `-webkit-line-clamp` ellipsizes the text node.
+      */}
+      <SelectPrimitive.ItemText className="min-w-0 flex-1 line-clamp-1">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/registry/ui/separator.tsx

@@ -0,0 +1,25 @@
+// Copied by `vantage add ui separator`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/separator.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@squadbase/vantage/ui"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }