tembro 6.0.3 → 6.1.0

package/packages/cli/vendor/src/components/notifications/action-toast.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { RotateCcwIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { useToast, type CreateToastInput, type ToastShortcutInput } from "@/components/notifications/toast"
+
+export type ActionToastOptions = Omit<CreateToastInput, "action"> & {
+  actionLabel?: React.ReactNode
+  onAction?: () => void
+  undoLabel?: React.ReactNode
+  onUndo?: () => void
+}
+
+export type ActionToastButtonProps = React.ComponentProps<typeof Button> & {
+  toast: ActionToastOptions
+}
+
+function ActionToastButton({ toast, children, onClick, ...props }: ActionToastButtonProps) {
+  const toaster = useToast()
+
+  return (
+    <Button
+      {...props}
+      onClick={(event) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        showActionToast(toaster, toast)
+      }}
+    >
+      {children}
+    </Button>
+  )
+}
+
+function ActionToastUndoButton({ onUndo, label = "Undo" }: { onUndo?: () => void; label?: React.ReactNode }) {
+  return (
+    <Button type="button" size="sm" variant="outline" leftIcon={<RotateCcwIcon className="size-3.5" />} onClick={onUndo}>
+      {label}
+    </Button>
+  )
+}
+
+function showActionToast(
+  toaster: ReturnType<typeof useToast>,
+  {
+    actionLabel = "Action",
+    onAction,
+    undoLabel,
+    onUndo,
+    ...toast
+  }: ActionToastOptions
+) {
+  const action = onUndo ? (
+    <ActionToastUndoButton onUndo={onUndo} label={undoLabel} />
+  ) : onAction ? (
+    <Button type="button" size="sm" variant="outline" onClick={onAction}>{actionLabel}</Button>
+  ) : undefined
+
+  return toaster.addToast({ ...toast, action })
+}
+
+function useActionToast() {
+  const toaster = useToast()
+
+  return React.useCallback(
+    (toast: ActionToastOptions | ToastShortcutInput) => {
+      if (typeof toast === "object" && toast !== null && !React.isValidElement(toast) && !Array.isArray(toast)) {
+        return showActionToast(toaster, toast as ActionToastOptions)
+      }
+      return toaster.info(toast)
+    },
+    [toaster]
+  )
+}
+
+export { ActionToastButton, showActionToast, useActionToast }

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

@@ -1,2 +1,3 @@
-export * from "./toast"
+export * from "./toast"
 export * from "./notification-center"
+export * from "./action-toast"

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

@@ -1 +1,2 @@
 export * from "./empty-state"
+export * from "./permissions-matrix"

package/packages/cli/vendor/src/components/patterns/permissions-matrix.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type PermissionMatrixRole = {
+  key: string
+  label: React.ReactNode
+}
+
+export type PermissionMatrixPermission = {
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+}
+
+export type PermissionMatrixValue = Record<string, string[]>
+
+export type PermissionsMatrixProps = React.ComponentProps<"div"> & {
+  roles: PermissionMatrixRole[]
+  permissions: PermissionMatrixPermission[]
+  value?: PermissionMatrixValue
+  onValueChange?: (value: PermissionMatrixValue) => void
+}
+
+function PermissionsMatrix({ roles, permissions, value = {}, onValueChange, className, ...props }: PermissionsMatrixProps) {
+  const toggle = (permissionKey: string, roleKey: string) => {
+    const current = value[permissionKey] ?? []
+    const next = current.includes(roleKey) ? current.filter((item) => item !== roleKey) : [...current, roleKey]
+    onValueChange?.({ ...value, [permissionKey]: next })
+  }
+
+  return (
+    <div data-slot="permissions-matrix" className={cn("overflow-hidden rounded-lg border", className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Permission</TableHead>
+            {roles.map((role) => <TableHead key={role.key} className="text-center">{role.label}</TableHead>)}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {permissions.map((permission) => (
+            <TableRow key={permission.key}>
+              <TableCell>
+                <span className="grid gap-0.5">
+                  <span className="font-medium">{permission.label}</span>
+                  {permission.description ? <span className="text-xs text-muted-foreground">{permission.description}</span> : null}
+                </span>
+              </TableCell>
+              {roles.map((role) => (
+                <TableCell key={role.key} className="text-center">
+                  <Checkbox
+                    aria-label={`${permission.label} for ${role.label}`}
+                    checked={(value[permission.key] ?? []).includes(role.key)}
+                    onCheckedChange={() => toggle(permission.key, role.key)}
+                  />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export { PermissionsMatrix }

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

@@ -1 +1,2 @@
 export * from "./empty-state"
+export * from "./permissions-matrix"

package/packages/cli/vendor/src/public-component-surface.ts

@@ -17,6 +17,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "switch", registryName: "switch", surface: "documented" },
   { slug: "radio-group", registryName: "radio-group", surface: "documented" },
   { slug: "number-field", registryName: "number-field", surface: "documented" },
+  { slug: "multi-select", registryName: "multi-select", surface: "documented" },
   { slug: "toggle-group", registryName: "toggle-group", surface: "documented" },
   { slug: "toolbar", registryName: "toolbar", surface: "documented" },
   { slug: "overlay", registryName: "dialog", surface: "documented" },
@@ -34,11 +35,14 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "alert", registryName: "alert", surface: "documented" },
   { slug: "toast", registryName: "toast", surface: "documented" },
   { slug: "notification-center", registryName: "notification-center", surface: "documented" },
+  { slug: "action-toast", registryName: "action-toast", surface: "documented" },
   { slug: "bar-chart", registryName: "charts", surface: "documented" },
+  { slug: "chart-card", registryName: "chart-card", surface: "documented" },
   { slug: "sidebar", registryName: "sidebar", surface: "documented" },
   { slug: "breadcrumbs", registryName: "breadcrumbs", surface: "documented" },
   { slug: "workspace-layout", registryName: "workspace-layout", surface: "documented" },
   { slug: "state-view", registryName: "state-view", surface: "documented" },
+  { slug: "async-boundary", registryName: "async-boundary", surface: "documented" },
   { slug: "file-upload", registryName: "file-upload", surface: "documented" },
   { slug: "progress", registryName: "progress", surface: "documented" },
   { slug: "accordion", registryName: "accordion", surface: "documented" },
@@ -47,6 +51,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "skeleton", registryName: "skeleton", surface: "documented" },
   { slug: "spinner", registryName: "spinner", surface: "documented" },
   { slug: "command-palette", registryName: "command-palette", surface: "documented" },
+  { slug: "advanced-command-menu", registryName: "advanced-command-menu", surface: "documented" },
   { slug: "inline-editable", registryName: "inline-editable", surface: "documented" },
   { slug: "avatar", registryName: "avatar", surface: "documented" },
   { slug: "code-block", registryName: "code-block", surface: "documented" },
@@ -60,14 +65,18 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "copy-button", registryName: "copy-button", surface: "documented" },
   { slug: "section", registryName: "section", surface: "documented" },
   { slug: "empty-state", registryName: "empty-state", surface: "documented" },
+  { slug: "permissions-matrix", registryName: "permissions-matrix", surface: "documented" },
   { slug: "calendar-scheduler", registryName: "calendar-scheduler", surface: "documented" },
+  { slug: "calendar-range-scheduler", registryName: "calendar-range-scheduler", surface: "documented" },
   { slug: "dual-list-picker", registryName: "dual-list-picker", surface: "documented" },
   { slug: "resizable-panel", registryName: "resizable-panel", surface: "documented" },
+  { slug: "file-manager", registryName: "file-manager", surface: "documented" },
   { slug: "tag", registryName: "tag", surface: "documented" },
   { slug: "carousel", registryName: "carousel", surface: "documented" },
   { slug: "typography", registryName: "typography", surface: "documented" },
   { slug: "json-input", registryName: "json-input", surface: "documented" },
   { slug: "time-picker", registryName: "time-picker", surface: "documented" },
+  { slug: "date-time-picker", registryName: "date-time-picker", surface: "documented" },
   { slug: "sortable-list", registryName: "sortable-list", surface: "documented" },
   { slug: "virtual-list", registryName: "virtual-list", surface: "documented" },
   { slug: "color-picker", registryName: "color-picker", surface: "documented" },
@@ -75,6 +84,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "qr-code", registryName: "qr-code", surface: "documented" },
   { slug: "rich-text-editor", registryName: "rich-text-editor", surface: "documented" },
   { slug: "image-cropper", registryName: "image-cropper", surface: "documented" },
+  { slug: "data-grid", registryName: "data-grid", surface: "documented" },
 ] as const
 
 export const standalonePublicComponentSurfaces: readonly PublicComponentSurfaceEntry[] = [] as const

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@6.0.3 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@6.1.0 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@6.0.3" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@6.1.0" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@6.0.3",
+          label: "tembro@6.1.0",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"