@squadbase/vantage 0.6.2-dev1.b332e5a → 0.6.2-dev1.bcb51d1

package/docs/ja/ui-and-theming.md

@@ -32,11 +32,16 @@ export default function Overview() {
 ```
 
 `/ui` にあるもの（抜粋）: `Button`、`Card`、`Table` プリミティブ、`Tabs`、`Input` / `Select` /
-`Checkbox` / `Switch` / `Slider`、`Calendar`、`Dialog` / `Sheet` / `Popover` / `Tooltip` /
-`DropdownMenu`、`Sidebar`、`Alert` / `Skeleton` / `Spinner`、`Loading` / `Empty` / `ErrorState`。
+`Checkbox` / `RadioGroup` / `Switch` / `Slider` / `Combobox` / `Field`、`Calendar`、`Dialog` /
+`AlertDialog` / `Sheet` / `Drawer` / `Popover` / `HoverCard` / `Tooltip` / `DropdownMenu`、`Sidebar`、
+`Pagination`、`Avatar`、`Kbd`、`Toaster` + `toast.add()`、`Alert` / `Skeleton` / `Spinner`、
+`Loading` / `Empty` / `ErrorState`。
 
 `/components` にあるもの（抜粋）: `PageShell`、`AppShell`、`DashboardCard`、`DataTable`、
-`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`MetricValue`、`TrendIndicator`。
+型付きチャート（`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` /
+`ProgressCircle` / `Tracker`）、`EChart`、`FunnelSteps`、`FilterBar`、`DateRangePicker`、`KpiCard`、
+`Delta`。グラフはまず型付きチャートで描き、その props で表せない図（二軸・散布図・
+ヒートマップなど）だけ `EChart` に `EChartsOption` を渡します。
 
 各コンポーネントの props と使い方は [コンポーネント](components) タブにまとめてあります。
 
@@ -203,13 +208,15 @@ import { cn } from "@squadbase/vantage/ui";
 コンポーネントの中身を自分のものにしたいときは、編集可能なソースを `components/` にコピーします。
 
 ```bash
-vantage add ui data-table      # 編集可能な DataTable をコピー
+vantage add ui data-table      # 編集可能な DataTable をコピー → components/ui/data-table.tsx
+vantage add ui bar-chart       # /components の部品も同じく add ui で取り出せる
 vantage add block sales-overview
 ```
 
-> [!NOTE]
-> 現行プロトタイプで `vantage add` がコピーできるのは `data-table`（ui）と `sales-overview`（block）
-> のみです。その他の UI コンポーネントは import 専用です。
+`/ui` のプリミティブも `/components` の部品も、すべて kebab-case の名前で `add ui` に渡せます
+（各コンポーネントのページに取り込みコマンドがあります）。コピーの中の import は公開サブパス
+（`@squadbase/vantage/ui` など）に書き換わっているので、そのまま動きます。使うだけならコピーは
+要りません。import が既定です。
 
 ## 次に読む
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage",
-  "version": "0.6.2-dev1.b332e5a",
+  "version": "0.6.2-dev1.bcb51d1",
   "description": "Data dashboard framework for Squadbase Editor. Vite-powered, config-free, one-file first.",
   "type": "module",
   "license": "MIT",
@@ -99,23 +99,6 @@
     "templates",
     "NOTICE"
   ],
-  "scripts": {
-    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "build:js": "tsup --no-dts",
-    "build:types": "tsup --dts-only",
-    "build:docs": "node scripts/build-docs.mjs",
-    "dev": "tsup --watch --no-dts",
-    "dev:types": "tsc --noEmit --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "tsc --noEmit",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "node scripts/build-docs.mjs && node scripts/build.mjs",
-    "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",
-    "site:install": "npm --prefix site install",
-    "site:dev": "npm --prefix site run dev",
-    "site:build": "npm --prefix site run build"
-  },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@hono/node-server": "^2.1.5",
@@ -130,7 +113,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "echarts": "^6.0.0",
-    "esbuild": "^0.28.1",
+    "esbuild": "0.28.1",
     "fflate": "^0.8.3",
     "hono": "^4.13.13",
     "html-to-image": "^1.11.13",
@@ -139,15 +122,22 @@
     "picocolors": "^1.1.1",
     "react-day-picker": "^10.0.1",
     "read-excel-file": "^9.3.10",
+    "shiki": "3.23.0",
     "streamdown": "^2.5.0",
-    "tailwind-merge": "^3.0.0",
+    "tailwind-merge": "3.6.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.0.0",
     "vite": "^8.3.4"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react-dom": ">=18.2.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
@@ -159,6 +149,26 @@
     "react-dom": "^19.3.1",
     "tsup": "^8.5.1",
     "typescript": "^5.7.0",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "@squadbase/squadkit": "0.0.0"
+  },
+  "gitHead": "bcb51d1b7671c9392d9634abef5514d0f277f30d",
+  "scripts": {
+    "build": "node scripts/build-docs.mjs && node scripts/build.mjs",
+    "build:js": "tsup --no-dts",
+    "build:types": "tsup --dts-only",
+    "build:docs": "node scripts/build-docs.mjs",
+    "dev": "tsup --watch --no-dts",
+    "dev:types": "tsc --noEmit --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "registry": "node scripts/gen-registry.mjs",
+    "registry:check": "node scripts/gen-registry.mjs --check",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "type-check": "tsc --noEmit && tsc --noEmit -p tsconfig.registry.json",
+    "release": "pnpm publish --@squadbase:registry=https://registry.npmjs.org",
+    "site:install": "npm --prefix site install",
+    "site:dev": "npm --prefix site run dev",
+    "site:build": "npm --prefix site run build"
   }
-}
+}

package/registry/ui/accordion.tsx

@@ -0,0 +1,76 @@
+// Copied by `vantage add ui accordion`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/accordion.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@squadbase/vantage/ui"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up motion-reduce:animate-none"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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/squadkit registry/ui/alert-dialog.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, 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 motion-reduce:animate-none! 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 motion-reduce:animate-none! 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,80 @@
+// Copied by `vantage add ui alert`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/alert.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+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 }