@squadbase/vantage 0.6.1 → 0.6.2-dev1.31accb1

package/registry/ui/alert-dialog.tsx

@@ -0,0 +1,189 @@
+// Copied by `vantage add ui alert-dialog`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/alert-dialog.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "@squadbase/vantage/ui"
+
+import { Button } from "@squadbase/vantage/ui"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/registry/ui/alert.tsx

@@ -0,0 +1,78 @@
+// Copied by `vantage add ui alert`. This file is yours to edit.
+// Generated from @squadbase/vantage src/ui/alert.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/registry/ui/app-shell.tsx

@@ -0,0 +1,281 @@
+// Copied by `vantage add ui app-shell`. This file is yours to edit.
+// Generated from @squadbase/vantage src/components/app-shell.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+/**
+ * AppShell — the outermost application frame. `variant="sidebar"` (default)
+ * renders a collapsible sidebar with nested nav groups; `variant="header"`
+ * collapses the same nav into a single select in a top bar.
+ *
+ * Navigation is router-agnostic: pass `linkComponent` to render links with your
+ * router's Link, or leave it and `onNavigate` handles the header variant.
+ */
+import { forwardRef, type ElementType, type ReactNode } from "react"
+import { ChevronRight } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@squadbase/vantage/ui"
+import { Separator } from "@squadbase/vantage/ui"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@squadbase/vantage/ui"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "@squadbase/vantage/ui"
+import type { NavGroup, NavItem } from "@squadbase/vantage/components"
+
+export interface AppShellSidebarProps {
+  variant?: "sidebar"
+  groups: NavGroup[]
+  actions?: ReactNode
+  header?: ReactNode
+  children: ReactNode
+  defaultOpen?: boolean
+  className?: string
+  linkComponent?: ElementType
+  onNavigate?: (href: string) => void
+}
+
+export interface AppShellHeaderProps {
+  variant: "header"
+  groups: NavGroup[]
+  actions?: ReactNode
+  header?: ReactNode
+  children: ReactNode
+  className?: string
+  linkComponent?: ElementType
+  onNavigate?: (href: string) => void
+}
+
+export type AppShellProps = AppShellSidebarProps | AppShellHeaderProps
+
+/** Nested groups collapse to their leaves — the select is a flat list. */
+function flattenItems(item: NavItem): NavItem[] {
+  if (item.children && item.children.length > 0) {
+    return item.children.flatMap(flattenItems)
+  }
+  return [item]
+}
+
+function NavSelect({
+  groups,
+  onNavigate,
+}: {
+  groups: NavGroup[]
+  onNavigate: (href: string) => void
+}) {
+  const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems))
+  const currentValue = allItems.find((item) => item.isActive)?.href ?? ""
+
+  return (
+    <Select
+      value={currentValue}
+      onValueChange={(href) => {
+        // Base UI reports `null` when the selection is cleared; there is no
+        // page to navigate to in that case.
+        if (href !== null) onNavigate(href)
+      }}
+    >
+      <SelectTrigger size="sm" className="w-48">
+        <SelectValue placeholder="ページを選択" />
+      </SelectTrigger>
+      {/*
+        Page titles are author-written and often longer than the 12rem trigger,
+        so the list is allowed to grow past the anchor width (bounded by the
+        viewport) instead of clamping every title to the trigger's width.
+      */}
+      <SelectContent
+        align="start"
+        className="w-auto min-w-(--anchor-width) max-w-[min(24rem,var(--available-width))]"
+      >
+        {groups.map((group, index) => (
+          <SelectGroup key={group.label ?? index}>
+            {group.label && <SelectLabel>{group.label}</SelectLabel>}
+            {group.items.flatMap(flattenItems).map((item) => (
+              <SelectItem key={item.href} value={item.href} disabled={item.disabled}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function NavItemWithChildren({
+  item,
+  linkComponent: LinkComponent = "a",
+}: {
+  item: NavItem
+  linkComponent?: ElementType
+}) {
+  return (
+    <Collapsible
+      defaultOpen={item.isActive}
+      className="group/collapsible"
+      render={<SidebarMenuItem />}
+    >
+      <CollapsibleTrigger
+        render={
+          <SidebarMenuButton
+            tooltip={item.label}
+            aria-disabled={item.disabled}
+            className={cn(item.disabled && "pointer-events-none")}
+          />
+        }
+      >
+        {item.icon && <item.icon />}
+        <span>{item.label}</span>
+        <ChevronRight className="ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" />
+      </CollapsibleTrigger>
+      {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {item.children!.map((child) => (
+            <SidebarMenuSubItem key={child.href}>
+              <SidebarMenuSubButton
+                isActive={child.isActive}
+                render={
+                  <LinkComponent
+                    href={child.href}
+                    aria-disabled={child.disabled}
+                    tabIndex={child.disabled ? -1 : undefined}
+                    className={cn(child.disabled && "pointer-events-none opacity-50")}
+                  />
+                }
+              >
+                {child.icon && <child.icon />}
+                <span>{child.label}</span>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function NavItemLink({
+  item,
+  linkComponent: LinkComponent = "a",
+}: {
+  item: NavItem
+  linkComponent?: ElementType
+}) {
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        tooltip={item.label}
+        isActive={item.isActive}
+        render={
+          <LinkComponent
+            href={item.href}
+            aria-disabled={item.disabled}
+            tabIndex={item.disabled ? -1 : undefined}
+            className={cn(item.disabled && "pointer-events-none")}
+          />
+        }
+      >
+        {item.icon && <item.icon />}
+        <span>{item.label}</span>
+      </SidebarMenuButton>
+      {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+    </SidebarMenuItem>
+  )
+}
+
+const defaultNavigate = (href: string) => {
+  window.location.assign(href)
+}
+
+export const AppShell = forwardRef<HTMLDivElement, AppShellProps>((props, ref) => {
+  const {
+    variant = "sidebar",
+    groups,
+    actions,
+    header,
+    children,
+    className,
+    linkComponent,
+    onNavigate = defaultNavigate,
+  } = props
+
+  if (variant === "header") {
+    return (
+      <div ref={ref} data-slot="app-shell" className={cn("flex h-full flex-col", className)}>
+        {header !== undefined ? (
+          header
+        ) : (
+          <header className="flex h-14 shrink-0 items-center gap-3 border-b px-4">
+            {groups.length > 0 && <NavSelect groups={groups} onNavigate={onNavigate} />}
+            {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+          </header>
+        )}
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+    )
+  }
+
+  const { defaultOpen = true } = props as AppShellSidebarProps
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <Sidebar data-slot="app-sidebar" collapsible="offcanvas">
+        <SidebarContent>
+          {groups.map((group, index) => (
+            <SidebarGroup key={group.label ?? index}>
+              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
+              <SidebarMenu>
+                {group.items.map((item) =>
+                  item.children && item.children.length > 0 ? (
+                    <NavItemWithChildren
+                      key={item.href}
+                      item={item}
+                      linkComponent={linkComponent}
+                    />
+                  ) : (
+                    <NavItemLink key={item.href} item={item} linkComponent={linkComponent} />
+                  ),
+                )}
+              </SidebarMenu>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        {actions && <SidebarFooter>{actions}</SidebarFooter>}
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset ref={ref} data-slot="app-shell" className={className}>
+        {header !== undefined ? (
+          header
+        ) : (
+          <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-4" />
+          </header>
+        )}
+        <main className="flex-1 overflow-auto">{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+})
+AppShell.displayName = "AppShell"