azamat-ui-kit-cli 0.2.2

package/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/vendor/src/components/overlay/confirm-dialog.tsx

@@ -0,0 +1,66 @@
+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 handleCancel = () => {
+    onCancel?.()
+    onOpenChange?.(false)
+  }
+
+  return (
+    <ModalShell
+      onOpenChange={onOpenChange}
+      footer={
+        <DialogActions>
+          <DialogActionButton
+            type="button"
+            variant="outline"
+            disabled={cancelDisabled || isLoading}
+            onClick={handleCancel}
+          >
+            {cancelText}
+          </DialogActionButton>
+          <DialogActionButton
+            type="button"
+            variant={confirmVariant}
+            disabled={confirmDisabled}
+            isLoading={isLoading}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </DialogActionButton>
+        </DialogActions>
+      }
+      {...props}
+    />
+  )
+}
+
+export { ConfirmDialog }
+export type { ConfirmDialogProps }

package/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/vendor/src/components/overlay/index.ts

@@ -0,0 +1,4 @@
+export * from "./dialog-actions"
+export * from "./modal-shell"
+export * from "./confirm-dialog"
+export * from "./sheet-shell"

package/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 }

package/vendor/src/components/overlay/sheet-shell.tsx

@@ -0,0 +1,212 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type SheetSide = "top" | "right" | "bottom" | "left"
+
+type SheetShellProps = {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  children?: React.ReactNode
+  footer?: React.ReactNode
+  side?: SheetSide
+  showCloseButton?: boolean
+  contentClassName?: string
+  headerClassName?: string
+  bodyClassName?: string
+}
+
+const Sheet = DialogPrimitive.Root
+
+function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const sheetSideClassName: Record<SheetSide, string> = {
+  top: "inset-x-0 top-0 max-h-[85vh] rounded-b-xl border-b data-open:slide-in-from-top data-closed:slide-out-to-top",
+  right:
+    "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-md",
+  bottom:
+    "inset-x-0 bottom-0 max-h-[85vh] rounded-t-xl border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
+  left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-md",
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  side?: SheetSide
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <DialogPrimitive.Popup
+        data-slot="sheet-content"
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-background p-4 text-foreground shadow-xl outline-none duration-200 data-open:animate-in data-closed:animate-out",
+          sheetSideClassName[side],
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetClose
+            render={
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                className="absolute right-3 top-3"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetClose>
+        )}
+      </DialogPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-2 pr-8", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading text-base font-medium leading-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function renderSheetTrigger(trigger: React.ReactNode) {
+  if (!trigger) return null
+
+  if (React.isValidElement(trigger)) {
+    return <SheetTrigger render={trigger} />
+  }
+
+  return <SheetTrigger>{trigger}</SheetTrigger>
+}
+
+function SheetShell({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  showCloseButton = true,
+  contentClassName,
+  headerClassName,
+  bodyClassName,
+}: SheetShellProps) {
+  const hasHeader = Boolean(title || description)
+
+  return (
+    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {renderSheetTrigger(trigger)}
+      <SheetContent
+        side={side}
+        showCloseButton={showCloseButton}
+        className={contentClassName}
+      >
+        {hasHeader && (
+          <SheetHeader className={headerClassName}>
+            {title && <SheetTitle>{title}</SheetTitle>}
+            {description && <SheetDescription>{description}</SheetDescription>}
+          </SheetHeader>
+        )}
+
+        {children && (
+          <div data-slot="sheet-shell-body" className={cn("min-w-0 flex-1", bodyClassName)}>
+            {children}
+          </div>
+        )}
+
+        {footer && <SheetFooter>{footer}</SheetFooter>}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetShell,
+  SheetTitle,
+  SheetTrigger,
+}
+export type { SheetShellProps, SheetSide }