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

package/registry/ui/checkbox.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui checkbox`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/checkbox.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/checkbox.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
 import { cn } from "@squadbase/vantage/ui"

package/registry/ui/collapsible.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui collapsible`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/collapsible.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/collapsible.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
 
 function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {

package/registry/ui/combobox.tsx

@@ -1,5 +1,5 @@
 // Copied by `vantage add ui combobox`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/combobox.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/combobox.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
 "use client"
 
 import * as React from "react"
@@ -117,7 +117,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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",
+            "cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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}

package/registry/ui/command.tsx

@@ -1,5 +1,7 @@
 // Copied by `vantage add ui command`. This file is yours to edit.
-// Generated from @squadbase/vantage src/ui/command.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/ui/command.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 

package/registry/ui/dashboard-card.tsx

@@ -1,25 +1,51 @@
 // Copied by `vantage add ui dashboard-card`. This file is yours to edit.
-// Generated from @squadbase/vantage src/components/dashboard-card.tsx by `npm run registry` (in Vantage, edit src/, not registry/).
+// Generated from @squadbase/squadkit registry/components/dashboard-card.tsx by `npm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
 /**
  * DashboardCard — the tighter card used for dashboard tiles: smaller padding
  * than the plain `Card`, a title/description/action header, and a matching
  * skeleton for the loading state. `DashboardCardPreset` wires the common
  * arrangement in one prop-driven component.
+ *
+ * - **Rows line up by subgrid.** `subgrid={3}` (header, content, footer) or `{2}` makes the
+ *   tile span that many rows of its parent grid (`row-span-N` + `grid-template-rows: subgrid`),
+ *   so tiles placed directly in one grid share the top edge of each part. Parts that are not
+ *   given are not drawn (no empty header or footer, no fixed `h-*` / `min-h-*`); the preset puts
+ *   each part on its own row. Without `subgrid` it is a plain block.
+ * - **`size="sm"`** is a step tighter (padding), for two tiles side by side in a narrow place.
+ *
+ * Use it for tiles that hold a chart, ranking or table. For a single KPI use
+ * `KpiCard` — it is already a card, and computes the delta, labels and target
+ * lines from the values.
  */
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Skeleton } from "@squadbase/vantage/ui"
+import { SampleBadge, SampleClaim, useSampleMark } from "@squadbase/vantage/components"
+
+export interface DashboardCardProps extends HTMLAttributes<HTMLDivElement> {
+  /** 親の grid の何行にまたがって subgrid で揃えるか（ヘッダー・本文・フッターなら 3、ヘッダー・本文なら 2）。未指定なら通常のブロック。 */
+  subgrid?: 2 | 3
+  /** `"sm"` は一段小さい余白。Sheet の中などで 2 枚を横に並べるとき。既定 `"default"`。 */
+  size?: "default" | "sm"
+}
 
-export interface DashboardCardProps extends HTMLAttributes<HTMLDivElement> {}
+const SUBGRID_CLASS = {
+  2: "row-span-2 grid content-start grid-rows-subgrid",
+  3: "row-span-3 grid content-start grid-rows-subgrid",
+} as const
 
 export const DashboardCard = forwardRef<HTMLDivElement, DashboardCardProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, subgrid, size = "default", ...props }, ref) => (
     <div
       ref={ref}
       data-slot="dashboard-card"
+      data-size={size}
       className={cn(
-        "group rounded-lg border bg-card px-1 py-1 text-card-foreground",
+        "group rounded-xl border bg-card shadow-[var(--shadow-card)] px-1 py-1 text-card-foreground",
+        subgrid && SUBGRID_CLASS[subgrid],
         className,
       )}
       {...props}
@@ -35,7 +61,7 @@ export const DashboardCardHeader = forwardRef<HTMLDivElement, DashboardCardHeade
     <div
       ref={ref}
       data-slot="dashboard-card-header"
-      className={cn("flex flex-row items-start justify-between gap-4 px-3 py-3", className)}
+      className={cn("flex flex-row items-start justify-between gap-4 px-3 py-3 group-data-[size=sm]:px-2 group-data-[size=sm]:py-2", className)}
       {...props}
     />
   ),
@@ -89,7 +115,7 @@ export interface DashboardCardContentProps extends HTMLAttributes<HTMLDivElement
 
 export const DashboardCardContent = forwardRef<HTMLDivElement, DashboardCardContentProps>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} data-slot="dashboard-card-content" className={cn("p-3", className)} {...props} />
+    <div ref={ref} data-slot="dashboard-card-content" className={cn("p-3 group-data-[size=sm]:p-2", className)} {...props} />
   ),
 )
 DashboardCardContent.displayName = "DashboardCardContent"
@@ -101,7 +127,7 @@ export const DashboardCardFooter = forwardRef<HTMLDivElement, DashboardCardFoote
     <div
       ref={ref}
       data-slot="dashboard-card-footer"
-      className={cn("flex items-center px-3 py-1.5", className)}
+      className={cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className)}
       {...props}
     />
   ),
@@ -116,7 +142,7 @@ export function DashboardCardSkeleton({ className }: DashboardCardSkeletonProps)
   return (
     <div
       data-slot="dashboard-card-skeleton"
-      className={cn("rounded-lg border bg-card p-6 shadow-sm", className)}
+      className={cn("rounded-xl border bg-card p-6 shadow-[var(--shadow-card)]", className)}
     >
       <div className="flex items-start justify-between gap-4 pb-4">
         <Skeleton className="h-5 w-32" />
@@ -129,7 +155,8 @@ export function DashboardCardSkeleton({ className }: DashboardCardSkeletonProps)
 }
 
 export interface DashboardCardPresetProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    Pick<DashboardCardProps, "subgrid" | "size"> {
   title?: ReactNode
   description?: ReactNode
   actions?: ReactNode
@@ -149,26 +176,42 @@ export function DashboardCardPreset({
   contentClassName,
   footerClassName,
   className,
+  subgrid,
   ...props
 }: DashboardCardPresetProps) {
-  const hasHeader = title || description || actions
+  // Inside SampleData the card shows the mark in its header, and the parts inside it do not repeat it.
+  const sample = useSampleMark()
+  const hasHeader = title || description || actions || sample
   return (
-    <DashboardCard className={className} {...props}>
-      {hasHeader && (
-        <DashboardCardHeader className={headerClassName}>
-          {(title || description) && (
-            <div>
-              {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
-              {description && <DashboardCardDescription>{description}</DashboardCardDescription>}
-            </div>
-          )}
-          {actions && <DashboardCardAction>{actions}</DashboardCardAction>}
-        </DashboardCardHeader>
-      )}
-      {children && (
-        <DashboardCardContent className={contentClassName}>{children}</DashboardCardContent>
-      )}
-      {footer && <DashboardCardFooter className={footerClassName}>{footer}</DashboardCardFooter>}
+    <DashboardCard className={className} subgrid={subgrid} {...props}>
+      <SampleClaim>
+        {hasHeader && (
+          <DashboardCardHeader className={cn(subgrid && "row-start-1", headerClassName)}>
+            {(title || description) && (
+              <div>
+                {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+                {description && <DashboardCardDescription>{description}</DashboardCardDescription>}
+              </div>
+            )}
+            {(actions || sample) && (
+              <DashboardCardAction className={cn(sample && actions && "flex items-center gap-2")}>
+                {sample && <SampleBadge label={sample.label} />}
+                {actions}
+              </DashboardCardAction>
+            )}
+          </DashboardCardHeader>
+        )}
+        {children && (
+          <DashboardCardContent className={cn(subgrid && "row-start-2", contentClassName)}>
+            {children}
+          </DashboardCardContent>
+        )}
+        {footer && (
+          <DashboardCardFooter className={cn(subgrid === 3 && "row-start-3", footerClassName)}>
+            {footer}
+          </DashboardCardFooter>
+        )}
+      </SampleClaim>
     </DashboardCard>
   )
 }