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

package/registry/ui/field.tsx

@@ -0,0 +1,240 @@
+// Copied by `vantage add ui field`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/field.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@squadbase/vantage/ui"
+
+import { Label } from "@squadbase/vantage/ui"
+import { Separator } from "@squadbase/vantage/ui"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/registry/ui/filter-bar.tsx

@@ -0,0 +1,365 @@
+// Copied by `vantage add ui filter-bar`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/filter-bar.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * FilterBar — a compound filter row. `<FilterBar>` holds the (always
+ * controlled) filter values on context; the select, multi-select, active-chip
+ * and clear parts read and update them. `FilterBarPreset` builds the whole row
+ * from a `FilterConfig[]`.
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react"
+import { ChevronDown, X } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Badge } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+import { Checkbox } from "@squadbase/vantage/ui"
+import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@squadbase/vantage/ui"
+import type { FilterConfig, FilterOption, FilterValues } from "@squadbase/vantage/components"
+
+/* --------------------------------------------------------------- context */
+
+interface FilterBarContextValue {
+  /** Current filter values (controlled from outside) */
+  value: FilterValues
+  /** Notify the parent of a value change */
+  onChange: (next: FilterValues) => void
+  /** Optional clear callback — undefined means no clear button */
+  onClear?: () => void
+}
+
+const FilterBarContext = createContext<FilterBarContextValue | null>(null)
+
+function useFilterBar(): FilterBarContextValue {
+  const ctx = useContext(FilterBarContext)
+  if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>")
+  return ctx
+}
+
+/* ------------------------------------------------------------------ root */
+
+export interface FilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value: FilterValues
+  onChange: (values: FilterValues) => void
+  onClear?: () => void
+  className?: string
+  children?: ReactNode
+}
+
+export const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(
+  ({ value, onChange, onClear, className, children, ...props }, ref) => (
+    <FilterBarContext.Provider value={{ value, onChange, onClear }}>
+      <div
+        ref={ref}
+        role="search"
+        aria-label="フィルター"
+        data-slot="filter-bar"
+        className={cn("flex flex-wrap items-center gap-2", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </FilterBarContext.Provider>
+  ),
+)
+FilterBar.displayName = "FilterBar"
+
+/* ---------------------------------------------------------------- select */
+
+export interface FilterBarSelectProps {
+  filterKey: string
+  label: string
+  options: FilterOption[]
+  placeholder?: string
+  className?: string
+}
+
+export function FilterBarSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  className,
+}: FilterBarSelectProps) {
+  const { value, onChange } = useFilterBar()
+
+  // Base UI reports `null` when the selection is cleared — drop the key so
+  // "no filter" reads as absent rather than as an empty string.
+  const handleChange = (selected: string | null) =>
+    onChange({ ...value, [filterKey]: selected ?? undefined })
+
+  return (
+    <Select value={(value[filterKey] as string) ?? ""} onValueChange={handleChange}>
+      <SelectTrigger size="sm" aria-label={label} data-slot="filter-bar-select" className={className}>
+        <SelectValue placeholder={placeholder ?? label} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+FilterBarSelect.displayName = "FilterBarSelect"
+
+/* ---------------------------------------------------------- multi-select */
+
+export interface FilterBarMultiSelectProps {
+  filterKey: string
+  label: string
+  options: FilterOption[]
+  placeholder?: string
+  className?: string
+}
+
+export function FilterBarMultiSelect({
+  filterKey,
+  label,
+  options,
+  placeholder,
+  className,
+}: FilterBarMultiSelectProps) {
+  const { value, onChange } = useFilterBar()
+  const selected = (value[filterKey] as string[] | undefined) ?? []
+
+  const handleToggle = (option: string) => {
+    const next = selected.includes(option)
+      ? selected.filter((v) => v !== option)
+      : [...selected, option]
+    // Drop the key entirely when nothing is left, so "no filter" reads as absent.
+    onChange({ ...value, [filterKey]: next.length > 0 ? next : undefined })
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={<Button variant="outline" size="sm" className={cn("h-8 gap-1", className)} />}
+        aria-label={`${placeholder ?? label}${selected.length > 0 ? ` (${selected.length}件選択中)` : ""}`}
+        data-slot="filter-bar-multi-select"
+      >
+        {placeholder ?? label}
+        {selected.length > 0 && (
+          <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">
+            {selected.length}
+          </Badge>
+        )}
+        <ChevronDown className="size-3.5 opacity-50" aria-hidden="true" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-56 p-2">
+        <div className="flex flex-col gap-1" role="group" aria-label={label}>
+          {options.map((option) => (
+            <label
+              key={option.value}
+              className="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+            >
+              <Checkbox
+                checked={selected.includes(option.value)}
+                disabled={option.disabled}
+                onCheckedChange={() => handleToggle(option.value)}
+              />
+              {option.label}
+            </label>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+FilterBarMultiSelect.displayName = "FilterBarMultiSelect"
+
+/* ---------------------------------------------------------- active chips */
+
+export interface FilterBarActiveChipsProps {
+  /** Filter configs used to resolve option labels. Without them, raw values show. */
+  filters?: FilterConfig[]
+  className?: string
+}
+
+interface ActiveChip {
+  key: string
+  filterLabel: string
+  optionLabel: string
+  optionValue?: string
+  isMulti: boolean
+}
+
+export function FilterBarActiveChips({ filters, className }: FilterBarActiveChipsProps) {
+  const { value, onChange } = useFilterBar()
+
+  const getActiveChips = (): ActiveChip[] => {
+    const chips: ActiveChip[] = []
+
+    const pushRaw = (key: string, v: string | string[]) => {
+      if (typeof v === "string") {
+        chips.push({ key, filterLabel: key, optionLabel: v, isMulti: false })
+      } else {
+        for (const val of v) {
+          chips.push({ key, filterLabel: key, optionLabel: val, optionValue: val, isMulti: true })
+        }
+      }
+    }
+
+    for (const [key, v] of Object.entries(value)) {
+      if (v === undefined || v === "") continue
+
+      const filter = filters?.find((f) => f.key === key)
+      if (!filter) {
+        pushRaw(key, v)
+        continue
+      }
+
+      if (filter.type === "select" && typeof v === "string") {
+        const option = filter.options?.find((o) => o.value === v)
+        chips.push({
+          key,
+          filterLabel: filter.label,
+          optionLabel: option?.label ?? v,
+          isMulti: false,
+        })
+      } else if (filter.type === "multi-select" && Array.isArray(v)) {
+        for (const val of v) {
+          const option = filter.options?.find((o) => o.value === val)
+          chips.push({
+            key,
+            filterLabel: filter.label,
+            optionLabel: option?.label ?? val,
+            optionValue: val,
+            isMulti: true,
+          })
+        }
+      }
+    }
+
+    return chips
+  }
+
+  const handleRemoveFilter = (key: string, optionValue?: string) => {
+    if (optionValue !== undefined) {
+      const current = (value[key] as string[] | undefined) ?? []
+      const next = current.filter((v) => v !== optionValue)
+      onChange({ ...value, [key]: next.length > 0 ? next : undefined })
+    } else {
+      onChange({ ...value, [key]: undefined })
+    }
+  }
+
+  const activeChips = getActiveChips()
+
+  if (activeChips.length === 0) return null
+
+  return (
+    <>
+      {activeChips.map((chip) => (
+        <Badge
+          key={`${chip.key}-${chip.optionValue ?? "single"}`}
+          variant="secondary"
+          className={cn("gap-1 pr-1", className)}
+          data-slot="filter-bar-chip"
+        >
+          <span className="text-xs text-muted-foreground">{chip.filterLabel}:</span>
+          {chip.optionLabel}
+          <button
+            type="button"
+            className="ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20"
+            onClick={() => handleRemoveFilter(chip.key, chip.optionValue)}
+            aria-label={`${chip.filterLabel}: ${chip.optionLabel} を削除`}
+          >
+            <X className="size-3" aria-hidden="true" />
+          </button>
+        </Badge>
+      ))}
+    </>
+  )
+}
+FilterBarActiveChips.displayName = "FilterBarActiveChips"
+
+/* ----------------------------------------------------------- clear button */
+
+export interface FilterBarClearButtonProps {
+  /** Override the button label. Defaults to "クリア". */
+  label?: string
+  className?: string
+}
+
+export function FilterBarClearButton({ label = "クリア", className }: FilterBarClearButtonProps) {
+  const { value, onClear } = useFilterBar()
+  const hasActiveFilters = Object.values(value).some((v) =>
+    Array.isArray(v) ? v.length > 0 : v !== undefined && v !== "",
+  )
+  if (!hasActiveFilters || !onClear) return null
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn("h-7 px-2 text-xs", className)}
+      onClick={onClear}
+      aria-label="すべてのフィルターをクリア"
+      data-slot="filter-bar-clear-button"
+    >
+      {label}
+    </Button>
+  )
+}
+FilterBarClearButton.displayName = "FilterBarClearButton"
+
+/* ------------------------------------------------------------------ preset */
+
+export interface FilterBarPresetProps {
+  filters: FilterConfig[]
+  value: FilterValues
+  onChange: (values: FilterValues) => void
+  onClear?: () => void
+  className?: string
+}
+
+/** The whole row built from a `FilterConfig[]`. */
+export function FilterBarPreset({
+  filters,
+  value,
+  onChange,
+  onClear,
+  className,
+}: FilterBarPresetProps) {
+  return (
+    <FilterBar value={value} onChange={onChange} onClear={onClear} className={className}>
+      {filters.map((filter) => {
+        if (filter.type === "select") {
+          return (
+            <FilterBarSelect
+              key={filter.key}
+              filterKey={filter.key}
+              label={filter.label}
+              placeholder={filter.placeholder}
+              options={filter.options ?? []}
+            />
+          )
+        }
+        if (filter.type === "multi-select") {
+          return (
+            <FilterBarMultiSelect
+              key={filter.key}
+              filterKey={filter.key}
+              label={filter.label}
+              placeholder={filter.placeholder}
+              options={filter.options ?? []}
+            />
+          )
+        }
+        return null
+      })}
+      <FilterBarActiveChips filters={filters} />
+      {onClear && <FilterBarClearButton />}
+    </FilterBar>
+  )
+}
+FilterBarPreset.displayName = "FilterBarPreset"