tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/components/overlay/confirm-dialog.tsx

@@ -1,15 +1,37 @@
 "use client"
 
-import * as React from "react"
-
-import { DialogActionButton, DialogActions } from "@/components/overlay/dialog-actions"
-import { ModalShell, type ModalShellProps } from "@/components/overlay/modal-shell"
-
-type ConfirmVariant = React.ComponentProps<typeof DialogActionButton>["variant"]
-
-type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
-  cancelText?: React.ReactNode
-  confirmText?: React.ReactNode
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+type ConfirmVariant = React.ComponentProps<typeof Button>["variant"]
+type ConfirmDialogSize = "sm" | "md" | "lg" | "xl" | "full"
+
+type ConfirmDialogProps = {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  size?: ConfirmDialogSize
+  showCloseButton?: boolean
+  contentClassName?: string
+  headerClassName?: string
+  bodyClassName?: string
+  cancelText?: React.ReactNode
+  confirmText?: React.ReactNode
   confirmVariant?: ConfirmVariant
   confirmDisabled?: boolean
   cancelDisabled?: boolean
@@ -19,9 +41,26 @@ type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
   onCancel?: () => void
   onConfirm?: () => void | Promise<void>
 }
-
-function ConfirmDialog({
-  cancelText = "Cancel",
+
+function renderConfirmDialogTrigger(trigger: React.ReactNode) {
+  if (!trigger) return null
+  if (React.isValidElement(trigger)) return <DialogTrigger render={trigger} />
+  return <DialogTrigger>{trigger}</DialogTrigger>
+}
+
+function ConfirmDialog({
+  open,
+  defaultOpen,
+  trigger,
+  title,
+  description,
+  children,
+  size = "md",
+  showCloseButton = true,
+  contentClassName,
+  headerClassName,
+  bodyClassName,
+  cancelText = "Cancel",
   confirmText = "Confirm",
   confirmVariant = "default",
   confirmDisabled = false,
@@ -32,7 +71,6 @@ function ConfirmDialog({
   onCancel,
   onConfirm,
   onOpenChange,
-  ...props
 }: ConfirmDialogProps) {
   const [pending, setPending] = React.useState(false)
   const resolvedLoading = isLoading || pending
@@ -69,34 +107,50 @@ function ConfirmDialog({
   }
 
   return (
-    <ModalShell
-      showCloseButton={!resolvedLoading}
-      onOpenChange={handleOpenChange}
-      footer={
-        <DialogActions>
-          <DialogActionButton
+    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={handleOpenChange}>
+      {renderConfirmDialogTrigger(trigger)}
+      <DialogContent
+        size={size}
+        showCloseButton={showCloseButton && !resolvedLoading}
+        className={contentClassName}
+      >
+        {(title || description) && (
+          <DialogHeader className={headerClassName}>
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+        )}
+
+        {children && (
+          <div data-slot="confirm-dialog-body" className={cn("min-w-0", bodyClassName)}>
+            {children}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
             type="button"
             variant="outline"
             disabled={cancelDisabled || resolvedLoading}
             onClick={handleCancel}
           >
             {cancelText}
-          </DialogActionButton>
-          <DialogActionButton
+          </Button>
+          <Button
             type="button"
             variant={confirmVariant}
             disabled={confirmDisabled || resolvedLoading}
-            isLoading={resolvedLoading}
+            loading={resolvedLoading}
+            loadingLabel={typeof confirmText === "string" ? confirmText : "Loading"}
             onClick={() => void handleConfirm()}
           >
             {confirmText}
-          </DialogActionButton>
-        </DialogActions>
-      }
-      {...props}
-    />
-  )
-}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
 
 export { ConfirmDialog }
 export type { ConfirmDialogProps }

package/packages/cli/vendor/src/components/overlay/index.ts

@@ -1,6 +1,3 @@
 export * from "./alert-dialog"
 export * from "./confirm-dialog"
-export * from "./dialog-actions"
 export * from "./drawer"
-export * from "./modal-shell"
-export * from "./sheet-shell"

package/packages/cli/vendor/src/components/patterns/bulk-action-bar.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type BulkActionBarProps = React.ComponentProps<"div"> & {
+  selectedCount: number
+  selectedLabel?: (count: number) => React.ReactNode
+  actions?: React.ReactNode
+  clearLabel?: React.ReactNode
+  onClear?: () => void
+}
+
+function BulkActionBar({
+  className,
+  selectedCount,
+  selectedLabel = (count) => `${count} selected`,
+  actions,
+  clearLabel = "Clear",
+  onClear,
+  children,
+  ...props
+}: BulkActionBarProps) {
+  if (selectedCount <= 0) return null
+
+  return (
+    <div
+      data-slot="bulk-action-bar"
+      className={cn(
+        "flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between",
+        className
+      )}
+      {...props}
+    >
+      <div data-slot="bulk-action-bar-count" className="text-sm font-medium">
+        {selectedLabel(selectedCount)}
+      </div>
+      <div data-slot="bulk-action-bar-actions" className="flex flex-wrap items-center gap-2">
+        {children}
+        {actions}
+        {onClear && (
+          <Button type="button" variant="ghost" size="sm" onClick={onClear}>
+            <XIcon data-icon="inline-start" />
+            {clearLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { BulkActionBar }

package/packages/cli/vendor/src/components/patterns/data-view.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+
+import { DataTable, type DataTableProps } from "@/components/data-table/data-table"
+import { EmptyState } from "@/components/patterns/empty-state"
+import { PageToolbar } from "@/components/patterns/page-toolbar"
+import { cn } from "@/lib/utils"
+
+export type DataViewProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  toolbar?: React.ComponentProps<typeof PageToolbar>
+  table?: DataTableProps<TData, TValue>
+  count?: number
+  loading?: boolean
+  error?: React.ReactNode
+  emptyTitle?: React.ReactNode
+  emptyDescription?: React.ReactNode
+  children?: React.ReactNode
+}
+
+function DataView<TData, TValue = unknown>({
+  className,
+  title,
+  description,
+  toolbar,
+  table,
+  count,
+  loading = false,
+  error,
+  emptyTitle = "No results",
+  emptyDescription = "Try adjusting filters or create a new item.",
+  children,
+  ...props
+}: DataViewProps<TData, TValue>) {
+  const hasHeader = Boolean(title || description)
+  const hasToolbar = Boolean(toolbar)
+  const hasData = count === undefined ? Boolean(children || table) : count > 0
+
+  return (
+    <div data-slot="data-view" className={cn("grid min-w-0 gap-4", className)} {...props}>
+      {hasHeader && (
+        <div data-slot="data-view-header" className="grid gap-1">
+          {title && <h2 className="text-xl font-semibold tracking-tight">{title}</h2>}
+          {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {hasToolbar && <PageToolbar {...toolbar} />}
+      {error ? (
+        <EmptyState tone="error" title="Something went wrong" description={error} />
+      ) : loading ? (
+        <EmptyState tone="info" title="Loading data" description="Please wait while the latest data is prepared." />
+      ) : hasData ? (
+        <div data-slot="data-view-content" className="min-w-0">
+          {children}
+          {table && <DataTable {...table} />}
+        </div>
+      ) : (
+        <EmptyState title={emptyTitle} description={emptyDescription} />
+      )}
+    </div>
+  )
+}
+
+export { DataView }

package/packages/cli/vendor/src/components/patterns/detail-layout.tsx

@@ -0,0 +1,75 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DetailLayoutProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  actions?: React.ReactNode
+  breadcrumbs?: React.ReactNode
+  summary?: React.ReactNode
+  aside?: React.ReactNode
+  footer?: React.ReactNode
+  headerClassName?: string
+  contentClassName?: string
+  asideClassName?: string
+}
+
+function DetailLayout({
+  className,
+  title,
+  description,
+  eyebrow,
+  actions,
+  breadcrumbs,
+  summary,
+  aside,
+  footer,
+  headerClassName,
+  contentClassName,
+  asideClassName,
+  children,
+  ...props
+}: DetailLayoutProps) {
+  const hasHeader = Boolean(title || description || eyebrow || actions)
+  const hasContent = Boolean(children || aside)
+
+  return (
+    <div data-slot="detail-layout" className={cn("grid min-w-0 gap-4", className)} {...props}>
+      {breadcrumbs && <div data-slot="detail-layout-breadcrumbs">{breadcrumbs}</div>}
+      {hasHeader && (
+        <div
+          data-slot="detail-layout-header"
+          className={cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", headerClassName)}
+        >
+          <div className="grid min-w-0 gap-1">
+            {eyebrow && <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{eyebrow}</div>}
+            {title && <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>}
+            {description && <p className="max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {summary && <div data-slot="detail-layout-summary">{summary}</div>}
+      {hasContent && (
+        <div
+          data-slot="detail-layout-content"
+          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+        >
+          <main data-slot="detail-layout-main" className="min-w-0">
+            {children}
+          </main>
+          {aside && (
+            <aside data-slot="detail-layout-aside" className={cn("min-w-0", asideClassName)}>
+              {aside}
+            </aside>
+          )}
+        </div>
+      )}
+      {footer && <div data-slot="detail-layout-footer">{footer}</div>}
+    </div>
+  )
+}
+
+export { DetailLayout }

package/packages/cli/vendor/src/components/patterns/empty-state.tsx

@@ -0,0 +1,99 @@
+import * as React from "react"
+import { AlertCircleIcon, SearchXIcon } from "lucide-react"
+
+import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type EmptyStateTone = "empty" | "error" | "info"
+
+export type EmptyStateAction = {
+  label: React.ReactNode
+  onClick?: () => void
+  href?: string
+  variant?: React.ComponentProps<typeof Button>["variant"]
+}
+
+export type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+  tone?: EmptyStateTone
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  primaryAction?: EmptyStateAction
+  secondaryAction?: EmptyStateAction
+  compact?: boolean
+}
+
+function renderEmptyStateAction(action: EmptyStateAction, fallbackVariant: React.ComponentProps<typeof Button>["variant"]) {
+  if (action.href) {
+    return (
+      <a className={buttonVariants({ variant: action.variant ?? fallbackVariant })} href={action.href}>
+        {action.label}
+      </a>
+    )
+  }
+
+  return (
+    <Button type="button" variant={action.variant ?? fallbackVariant} onClick={action.onClick}>
+      {action.label}
+    </Button>
+  )
+}
+
+function defaultEmptyStateIcon(tone: EmptyStateTone) {
+  if (tone === "error") return <AlertCircleIcon data-icon="inline-start" />
+  return <SearchXIcon data-icon="inline-start" />
+}
+
+function EmptyState({
+  className,
+  tone = "empty",
+  title,
+  description,
+  icon,
+  primaryAction,
+  secondaryAction,
+  compact = false,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      data-tone={tone}
+      data-compact={compact || undefined}
+      role={tone === "error" ? "alert" : "status"}
+      className={cn(
+        "flex flex-col items-center justify-center rounded-xl border bg-card text-center text-card-foreground shadow-sm",
+        compact ? "gap-3 p-5" : "min-h-64 gap-4 p-8",
+        className
+      )}
+      {...props}
+    >
+      <div
+        data-slot="empty-state-icon"
+        className="flex size-12 items-center justify-center rounded-full border bg-muted text-muted-foreground"
+      >
+        {icon ?? defaultEmptyStateIcon(tone)}
+      </div>
+      {(title || description) && (
+        <div data-slot="empty-state-content" className="grid max-w-md gap-1">
+          {title && <h2 className="text-base font-semibold tracking-tight">{title}</h2>}
+          {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
+        </div>
+      )}
+      {(primaryAction || secondaryAction) && (
+        <div data-slot="empty-state-actions" className="flex flex-wrap items-center justify-center gap-2">
+          {secondaryAction ? renderEmptyStateAction(secondaryAction, "outline") : null}
+          {primaryAction ? renderEmptyStateAction(primaryAction, "default") : null}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export type ErrorStateProps = Omit<EmptyStateProps, "tone">
+
+function ErrorState(props: ErrorStateProps) {
+  return <EmptyState tone="error" {...props} />
+}
+
+export { EmptyState, ErrorState }

package/packages/cli/vendor/src/components/patterns/index.ts

@@ -1,2 +1,9 @@
+export * from './form-builder'
 export * from './resource-page'
 export * from './resource-detail-page'
+export * from "./empty-state"
+export * from "./page-toolbar"
+export * from "./bulk-action-bar"
+export * from "./detail-layout"
+export * from "./settings-page"
+export * from "./data-view"

package/packages/cli/vendor/src/components/patterns/page-toolbar.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type PageToolbarProps = React.ComponentProps<"div"> & {
+  search?: React.ReactNode
+  filters?: React.ReactNode
+  viewOptions?: React.ReactNode
+  actions?: React.ReactNode
+  summary?: React.ReactNode
+  sticky?: boolean
+}
+
+function PageToolbar({
+  className,
+  search,
+  filters,
+  viewOptions,
+  actions,
+  summary,
+  sticky = false,
+  children,
+  ...props
+}: PageToolbarProps) {
+  const hasPrimary = Boolean(search || filters || children)
+  const hasSecondary = Boolean(summary || viewOptions || actions)
+
+  if (!hasPrimary && !hasSecondary) return null
+
+  return (
+    <div
+      data-slot="page-toolbar"
+      data-sticky={sticky || undefined}
+      className={cn(
+        "flex flex-col gap-3 rounded-xl border bg-card p-3 shadow-sm",
+        sticky && "sticky top-0 z-10",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        {hasPrimary && (
+          <div data-slot="page-toolbar-primary" className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
+            {search && <div className="min-w-0 flex-1">{search}</div>}
+            {filters}
+            {children}
+          </div>
+        )}
+        {hasSecondary && (
+          <div data-slot="page-toolbar-secondary" className="flex shrink-0 flex-wrap items-center gap-2">
+            {summary && <div className="text-sm text-muted-foreground">{summary}</div>}
+            {viewOptions}
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { PageToolbar }

package/packages/cli/vendor/src/components/patterns/public.ts

@@ -1,2 +1,9 @@
+export * from "./form-builder"
 export * from "./resource-page"
 export * from "./resource-detail-page"
+export * from "./empty-state"
+export * from "./page-toolbar"
+export * from "./bulk-action-bar"
+export * from "./detail-layout"
+export * from "./settings-page"
+export * from "./data-view"

package/packages/cli/vendor/src/components/patterns/resource-detail-page.tsx

@@ -71,9 +71,20 @@ function ResourceDetailPage({
   asideClassName,
   sectionClassName,
   ...props
-}: ResourceDetailPageProps) {
-  const visibleSections = sections?.filter((section) => !section.hidden) ?? []
-  const hasHeader = Boolean(title || description || eyebrow || actions || onBack)
+}: ResourceDetailPageProps) {
+  const visibleSections = sections?.filter((section) => !section.hidden) ?? []
+  const hasHeader = Boolean(title || description || eyebrow || actions || onBack)
+  const headerActions = onBack || actions ? (
+    <>
+      {onBack && (
+        <Button type="button" variant="outline" onClick={onBack}>
+          {backLabel}
+        </Button>
+      )}
+      {actions}
+    </>
+  ) : undefined
+  const hasMainContent = Boolean(children || visibleSections.length > 0)
 
   return (
     <div
@@ -87,22 +98,13 @@ function ResourceDetailPage({
       {hasHeader && (
         <PageHeader
           data-slot="resource-detail-page-header"
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-          actions={
-            <>
-              {onBack && (
-                <Button type="button" variant="outline" onClick={onBack}>
-                  {backLabel}
-                </Button>
-              )}
-              {actions}
-            </>
-          }
-          className={pageHeaderClassName}
-          {...headerProps}
-        />
+          eyebrow={eyebrow}
+          title={title}
+          description={description}
+          actions={headerActions}
+          className={pageHeaderClassName}
+          {...headerProps}
+        />
       )}
 
       {(status || summary || meta) && (
@@ -115,42 +117,44 @@ function ResourceDetailPage({
         </div>
       )}
 
-      <div
-        data-slot="resource-detail-page-content"
-        className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
-      >
-        <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
-          {children}
-
-          {visibleSections.map((section) => (
-            <section
-              key={section.id}
-              data-slot="resource-detail-page-section"
-              className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", section.className, sectionClassName)}
-            >
-              {(section.title || section.description || section.actions) && (
-                <div className="flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between">
-                  <div className="min-w-0 space-y-1">
-                    {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
-                    {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
-                  </div>
-                  {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
-                </div>
-              )}
-
-              <div className={cn("p-4", section.bodyClassName)}>
-                {section.children ?? (section.items ? <DescriptionList items={section.items} /> : null)}
-              </div>
-            </section>
-          ))}
-        </div>
-
-        {aside && (
-          <aside data-slot="resource-detail-page-aside" className={cn("min-w-0", asideClassName)}>
-            {aside}
-          </aside>
-        )}
-      </div>
+      {(hasMainContent || aside) && (
+        <div
+          data-slot="resource-detail-page-content"
+          className={cn("grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
+        >
+          <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
+            {children}
+
+            {visibleSections.map((section) => (
+              <section
+                key={section.id}
+                data-slot="resource-detail-page-section"
+                className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", section.className, sectionClassName)}
+              >
+                {(section.title || section.description || section.actions) && (
+                  <div className="flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="min-w-0 space-y-1">
+                      {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
+                      {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
+                    </div>
+                    {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
+                  </div>
+                )}
+
+                <div className={cn("p-4", section.bodyClassName)}>
+                  {section.children ?? (section.items ? <DescriptionList items={section.items} /> : null)}
+                </div>
+              </section>
+            ))}
+          </div>
+
+          {aside && (
+            <aside data-slot="resource-detail-page-aside" className={cn("min-w-0", asideClassName)}>
+              {aside}
+            </aside>
+          )}
+        </div>
+      )}
 
       {footer && <div data-slot="resource-detail-page-footer">{footer}</div>}
     </div>