tembro 1.0.0

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

@@ -0,0 +1,259 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, TriangleAlertIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type ToastTone = "default" | "success" | "info" | "warning" | "danger" | "loading"
+
+export type ToastItem = {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  tone?: ToastTone
+  action?: React.ReactNode
+  duration?: number
+  dismissible?: boolean
+}
+
+export type CreateToastInput = Omit<ToastItem, "id"> & {
+  id?: string
+}
+
+export type ToastShortcutInput = React.ReactNode | CreateToastInput
+
+export type ToastPromiseMessages<TData = unknown> = {
+  loading: ToastShortcutInput
+  success: ToastShortcutInput | ((data: TData) => ToastShortcutInput)
+  error: ToastShortcutInput | ((error: unknown) => ToastShortcutInput)
+}
+
+export type ToastContextValue = {
+  toasts: ToastItem[]
+  addToast: (toast: CreateToastInput) => string
+  updateToast: (id: string, toast: Partial<Omit<ToastItem, "id">>) => void
+  dismissToast: (id: string) => void
+  clearToasts: () => void
+  success: (toast: ToastShortcutInput) => string
+  info: (toast: ToastShortcutInput) => string
+  warning: (toast: ToastShortcutInput) => string
+  error: (toast: ToastShortcutInput) => string
+  loading: (toast: ToastShortcutInput) => string
+  promise: <TData>(promise: Promise<TData>, messages: ToastPromiseMessages<TData>) => Promise<TData>
+}
+
+const ToastContext = React.createContext<ToastContextValue | null>(null)
+
+const toneClassName: Record<ToastTone, string> = {
+  default: "border-border bg-popover text-popover-foreground",
+  success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100",
+  info: "border-blue-500/20 bg-blue-500/10 text-blue-950 dark:text-blue-100",
+  warning: "border-amber-500/20 bg-amber-500/10 text-amber-950 dark:text-amber-100",
+  danger: "border-destructive/20 bg-destructive/10 text-destructive",
+  loading: "border-border bg-popover text-popover-foreground",
+}
+
+const toneIcon: Record<ToastTone, React.ReactNode> = {
+  default: <InfoIcon className="size-4" />,
+  success: <CheckCircle2Icon className="size-4" />,
+  info: <InfoIcon className="size-4" />,
+  warning: <TriangleAlertIcon className="size-4" />,
+  danger: <AlertCircleIcon className="size-4" />,
+  loading: <Loader2Icon className="size-4 animate-spin" />,
+}
+
+function createToastId() {
+  return `toast-${Date.now()}-${Math.random().toString(16).slice(2)}`
+}
+
+function isToastObject(toast: ToastShortcutInput): toast is CreateToastInput {
+  return typeof toast === "object" && toast !== null && !React.isValidElement(toast) && !Array.isArray(toast)
+}
+
+function normalizeShortcutToast(toast: ToastShortcutInput, tone: ToastTone): CreateToastInput {
+  if (isToastObject(toast)) {
+    return { ...toast, tone: toast.tone ?? tone }
+  }
+
+  return { title: toast, tone }
+}
+
+function resolveToastMessage<TData>(message: ToastShortcutInput | ((data: TData) => ToastShortcutInput), data: TData) {
+  return typeof message === "function" ? message(data) : message
+}
+
+export type ToastProviderProps = React.PropsWithChildren<{
+  defaultDuration?: number
+  maxToasts?: number
+  pauseOnHover?: boolean
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"
+}>
+
+const positionClassName: Record<NonNullable<ToastProviderProps["position"]>, string> = {
+  "top-right": "right-4 top-4",
+  "top-left": "left-4 top-4",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "top-center": "left-1/2 top-4 -translate-x-1/2",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+}
+
+function ToastProvider({
+  children,
+  defaultDuration = 4000,
+  maxToasts = 5,
+  pauseOnHover = true,
+  position = "top-right",
+}: ToastProviderProps) {
+  const [toasts, setToasts] = React.useState<ToastItem[]>([])
+
+  const dismissToast = React.useCallback((id: string) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id))
+  }, [])
+
+  const addToast = React.useCallback(
+    (toast: CreateToastInput) => {
+      const id = toast.id ?? createToastId()
+      const nextToast: ToastItem = {
+        tone: "default",
+        duration: defaultDuration,
+        dismissible: true,
+        ...toast,
+        id,
+      }
+
+      setToasts((current) => [nextToast, ...current.filter((item) => item.id !== id)].slice(0, maxToasts))
+
+      return id
+    },
+    [defaultDuration, maxToasts]
+  )
+
+  const updateToast = React.useCallback((id: string, toast: Partial<Omit<ToastItem, "id">>) => {
+    setToasts((current) => current.map((item) => (item.id === id ? { ...item, ...toast } : item)))
+  }, [])
+
+  const clearToasts = React.useCallback(() => {
+    setToasts([])
+  }, [])
+
+  const success = React.useCallback((toast: ToastShortcutInput) => addToast(normalizeShortcutToast(toast, "success")), [addToast])
+  const info = React.useCallback((toast: ToastShortcutInput) => addToast(normalizeShortcutToast(toast, "info")), [addToast])
+  const warning = React.useCallback((toast: ToastShortcutInput) => addToast(normalizeShortcutToast(toast, "warning")), [addToast])
+  const error = React.useCallback((toast: ToastShortcutInput) => addToast(normalizeShortcutToast(toast, "danger")), [addToast])
+  const loading = React.useCallback((toast: ToastShortcutInput) => addToast({ duration: 0, ...normalizeShortcutToast(toast, "loading") }), [addToast])
+
+  const promise = React.useCallback(
+    async <TData,>(targetPromise: Promise<TData>, messages: ToastPromiseMessages<TData>) => {
+      const id = addToast({ duration: 0, dismissible: false, ...normalizeShortcutToast(messages.loading, "loading") })
+
+      try {
+        const data = await targetPromise
+        updateToast(id, {
+          duration: defaultDuration,
+          dismissible: true,
+          ...normalizeShortcutToast(resolveToastMessage(messages.success, data), "success"),
+        })
+        return data
+      } catch (promiseError) {
+        updateToast(id, {
+          duration: defaultDuration,
+          dismissible: true,
+          ...normalizeShortcutToast(resolveToastMessage(messages.error, promiseError), "danger"),
+        })
+        throw promiseError
+      }
+    },
+    [addToast, defaultDuration, updateToast]
+  )
+
+  const value = React.useMemo<ToastContextValue>(
+    () => ({
+      toasts,
+      addToast,
+      updateToast,
+      dismissToast,
+      clearToasts,
+      success,
+      info,
+      warning,
+      error,
+      loading,
+      promise,
+    }),
+    [addToast, clearToasts, dismissToast, error, info, loading, promise, success, toasts, updateToast, warning]
+  )
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div
+        data-slot="toast-viewport"
+        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
+      >
+        {toasts.map((toast) => (
+          <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}
+
+function ToastCard({
+  toast,
+  pauseOnHover,
+  onDismiss,
+}: {
+  toast: ToastItem
+  pauseOnHover: boolean
+  onDismiss: (id: string) => void
+}) {
+  const tone = toast.tone ?? "default"
+  const [hovered, setHovered] = React.useState(false)
+
+  React.useEffect(() => {
+    if (toast.duration === Infinity || toast.duration === 0) return
+    if (pauseOnHover && hovered) return
+
+    const timer = window.setTimeout(() => onDismiss(toast.id), toast.duration ?? 4000)
+
+    return () => window.clearTimeout(timer)
+  }, [hovered, onDismiss, pauseOnHover, toast.duration, toast.id])
+
+  return (
+    <div
+      data-slot="toast"
+      data-tone={tone}
+      className={cn("flex gap-3 rounded-lg border p-3 shadow-lg backdrop-blur", toneClassName[tone])}
+      role="status"
+      aria-live="polite"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div className="mt-0.5 shrink-0">{toneIcon[tone]}</div>
+      <div className="min-w-0 flex-1 space-y-1">
+        {toast.title && <div className="text-sm font-medium leading-none">{toast.title}</div>}
+        {toast.description && <div className="text-sm text-muted-foreground">{toast.description}</div>}
+        {toast.action && <div className="pt-1">{toast.action}</div>}
+      </div>
+      {toast.dismissible !== false && (
+        <Button type="button" variant="ghost" size="icon-xs" onClick={() => onDismiss(toast.id)}>
+          <XIcon />
+          <span className="sr-only">Dismiss</span>
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function useToast() {
+  const context = React.useContext(ToastContext)
+
+  if (!context) {
+    throw new Error("useToast must be used inside ToastProvider")
+  }
+
+  return context
+}
+
+export { ToastProvider, useToast }

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

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { AlertTriangleIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+export type AlertDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  cancelLabel?: React.ReactNode
+  actionLabel?: React.ReactNode
+  actionTone?: "default" | "destructive"
+  loading?: boolean
+  onAction?: () => void | Promise<void>
+  children?: React.ReactNode
+}
+
+function AlertDialog({
+  title = "Are you sure?",
+  description,
+  icon = <AlertTriangleIcon />,
+  cancelLabel = "Cancel",
+  actionLabel = "Continue",
+  actionTone = "destructive",
+  loading = false,
+  onAction,
+  children,
+  ...props
+}: AlertDialogProps) {
+  return (
+    <Dialog {...props}>
+      {children}
+      <DialogContent>
+        <DialogHeader>
+          <div className="mb-3 inline-flex size-11 items-center justify-center rounded-2xl border border-destructive/20 bg-destructive/10 text-destructive [&_svg]:size-5">
+            {icon}
+          </div>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose render={() => (
+            <Button type="button" variant="outline" disabled={loading}>
+              {cancelLabel}
+            </Button>
+          )} />
+          <Button type="button" variant={actionTone === "destructive" ? "destructive" : "default"} loading={loading} onClick={() => void onAction?.()}>
+            {actionLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { AlertDialog }

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

@@ -0,0 +1,77 @@
+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
+  confirmVariant?: ConfirmVariant
+  confirmDisabled?: boolean
+  cancelDisabled?: boolean
+  isLoading?: boolean
+  onCancel?: () => void
+  onConfirm?: () => void
+}
+
+function ConfirmDialog({
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  confirmVariant = "default",
+  confirmDisabled = false,
+  cancelDisabled = false,
+  isLoading = false,
+  onCancel,
+  onConfirm,
+  onOpenChange,
+  ...props
+}: ConfirmDialogProps) {
+  const handleOpenChange = (open: boolean) => {
+    if (isLoading && open === false) {
+      return
+    }
+
+    onOpenChange?.(open)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    if (!isLoading) {
+      onOpenChange?.(false)
+    }
+  }
+
+  return (
+    <ModalShell
+      showCloseButton={!isLoading}
+      onOpenChange={handleOpenChange}
+      footer={
+        <DialogActions>
+          <DialogActionButton
+            type="button"
+            variant="outline"
+            disabled={cancelDisabled || isLoading}
+            onClick={handleCancel}
+          >
+            {cancelText}
+          </DialogActionButton>
+          <DialogActionButton
+            type="button"
+            variant={confirmVariant}
+            disabled={confirmDisabled || isLoading}
+            isLoading={isLoading}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </DialogActionButton>
+        </DialogActions>
+      }
+      {...props}
+    />
+  )
+}
+
+export { ConfirmDialog }
+export type { ConfirmDialogProps }

package/packages/cli/vendor/src/components/overlay/demo.tsx

@@ -0,0 +1,7 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const overlayShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("dialog-actions", "DialogActions", "overlay", "Modal footer action row with cancel, secondary and primary actions."),
+  component("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
+  component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
+])

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

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { Loader2Icon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type DialogActionsAlign = "start" | "center" | "end" | "between"
+
+const alignClassName: Record<DialogActionsAlign, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+}
+
+export type DialogActionButtonProps = React.ComponentProps<typeof Button> & {
+  isLoading?: boolean
+  loadingLabel?: React.ReactNode
+}
+
+export type DialogActionsProps = React.ComponentProps<"div"> & {
+  align?: DialogActionsAlign
+  stackOnMobile?: boolean
+}
+
+function DialogActionButton({
+  children,
+  disabled,
+  isLoading = false,
+  loadingLabel,
+  className,
+  ...props
+}: DialogActionButtonProps) {
+  return (
+    <Button
+      className={className}
+      disabled={disabled || isLoading}
+      aria-busy={isLoading || undefined}
+      {...props}
+    >
+      {isLoading && <Loader2Icon data-icon="inline-start" className="animate-spin" />}
+      {isLoading && loadingLabel ? loadingLabel : children}
+    </Button>
+  )
+}
+
+function DialogActions({
+  className,
+  align = "end",
+  stackOnMobile = true,
+  ...props
+}: DialogActionsProps) {
+  return (
+    <div
+      data-slot="dialog-actions"
+      className={cn(
+        "flex items-center gap-2",
+        stackOnMobile && "flex-col-reverse sm:flex-row",
+        !stackOnMobile && "flex-row",
+        alignClassName[align],
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DialogActions, DialogActionButton }

package/packages/cli/vendor/src/components/overlay/drawer.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+export type DrawerSide = "left" | "right" | "top" | "bottom"
+
+export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  side?: DrawerSide
+  footer?: React.ReactNode
+  contentClassName?: string
+  showCloseButton?: boolean
+  children?: React.ReactNode
+}
+
+const sideClassName: Record<DrawerSide, string> = {
+  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] sm:max-w-lg",
+  left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] sm:max-w-lg",
+  top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)]",
+  bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)]",
+}
+
+function Drawer({
+  trigger,
+  title,
+  description,
+  side = "right",
+  footer,
+  contentClassName,
+  showCloseButton = true,
+  children,
+  ...props
+}: DrawerProps) {
+  return (
+    <Dialog {...props}>
+      {trigger ? <DialogTrigger render={trigger as React.ReactElement} /> : null}
+      <DialogContent showCloseButton={showCloseButton} className={cn("fixed p-0", sideClassName[side], contentClassName)}>
+        {(title || description) && (
+          <DialogHeader className="border-b border-border/70 p-6">
+            {title ? <DialogTitle>{title}</DialogTitle> : null}
+            {description ? <DialogDescription>{description}</DialogDescription> : null}
+          </DialogHeader>
+        )}
+        <div data-slot="drawer-body" className="min-h-0 flex-1 overflow-y-auto p-6">
+          {children}
+        </div>
+        {footer ? <div data-slot="drawer-footer" className="border-t border-border/70 p-5">{footer}</div> : null}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function DrawerCloseButton({ children = "Close", ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <DialogClose render={() => <Button type="button" variant="outline" {...props}>{children}</Button>} />
+  )
+}
+
+export { Drawer, DrawerCloseButton }

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

@@ -0,0 +1,6 @@
+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/overlay/modal-shell.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+type ModalShellSize = "sm" | "md" | "lg" | "xl" | "full"
+
+const modalSizeClassName: Record<ModalShellSize, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-2xl",
+  xl: "sm:max-w-4xl",
+  full: "sm:max-w-[calc(100vw-2rem)] sm:h-[calc(100vh-2rem)]",
+}
+
+export type ModalShellProps = {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  footer?: React.ReactNode
+  size?: ModalShellSize
+  showCloseButton?: boolean
+  contentClassName?: string
+  headerClassName?: string
+  bodyClassName?: string
+}
+
+function renderDialogTrigger(trigger: React.ReactNode) {
+  if (!trigger) return null
+
+  if (React.isValidElement(trigger)) {
+    return <DialogTrigger render={trigger} />
+  }
+
+  return <DialogTrigger>{trigger}</DialogTrigger>
+}
+
+function ModalShell({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  showCloseButton = true,
+  contentClassName,
+  headerClassName,
+  bodyClassName,
+}: ModalShellProps) {
+  const hasHeader = Boolean(title || description)
+
+  return (
+    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {renderDialogTrigger(trigger)}
+      <DialogContent
+        showCloseButton={showCloseButton}
+        className={cn(modalSizeClassName[size], contentClassName)}
+      >
+        {hasHeader && (
+          <DialogHeader className={headerClassName}>
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+        )}
+
+        {children && (
+          <div data-slot="modal-shell-body" className={cn("min-w-0", bodyClassName)}>
+            {children}
+          </div>
+        )}
+
+        {footer && <div data-slot="modal-shell-footer">{footer}</div>}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { ModalShell }
+export type { ModalShellSize }