@greatapps/greatauth-ui 0.3.6 → 0.3.7

package/dist/index.d.ts

@@ -1078,4 +1078,31 @@ declare function LoginForm({ config }: LoginFormProps): react_jsx_runtime.JSX.El
 
 declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
 
-export { AppHeader, AppShell, type AppShellConfig, AppSidebar, type HeaderConfig, LoginForm, type LoginFormConfig, type MenuGroup, type MenuItem, ThemeToggle, authClient, createUseAuth, signIn, signOut, signUp, useSession };
+declare const SIZE_MAP: {
+    readonly xs: "h-5 w-5 text-[9px]";
+    readonly sm: "h-6 w-6 text-[10px]";
+    readonly md: "h-8 w-8 text-xs";
+    readonly lg: "h-10 w-10 text-sm";
+    readonly xl: "h-16 w-16 text-lg";
+};
+interface EntityAvatarProps {
+    photo?: string | null;
+    name: string | null;
+    size?: keyof typeof SIZE_MAP;
+    className?: string;
+}
+declare function EntityAvatar({ photo, name, size, className, }: EntityAvatarProps): react_jsx_runtime.JSX.Element;
+
+interface ImageCropUploadProps {
+    value?: string | null;
+    onChange: (url: string) => void;
+    onRemove?: () => void;
+    entityType: string;
+    entityId?: number | string;
+    idAccount: number;
+    name?: string | null;
+    disabled?: boolean;
+}
+declare function ImageCropUpload({ value, onChange, onRemove, entityType, entityId, idAccount, name, disabled, }: ImageCropUploadProps): react_jsx_runtime.JSX.Element;
+
+export { AppHeader, AppShell, type AppShellConfig, AppSidebar, EntityAvatar, type EntityAvatarProps, type HeaderConfig, ImageCropUpload, type ImageCropUploadProps, LoginForm, type LoginFormConfig, type MenuGroup, type MenuItem, ThemeToggle, authClient, createUseAuth, signIn, signOut, signUp, useSession };

package/dist/index.js

@@ -1312,10 +1312,497 @@ function LoginForm({ config }) {
     /* @__PURE__ */ jsx18("p", { className: "mt-6 text-center text-xs text-muted-foreground", children: config.footerText || "Acesso restrito a utilizadores autorizados" })
   ] }) });
 }
+
+// src/components/entity-avatar.tsx
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var COLORS = [
+  "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+  "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+  "bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300",
+  "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  "bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300",
+  "bg-pink-100 text-pink-700 dark:bg-pink-900 dark:text-pink-300"
+];
+var SIZE_MAP = {
+  xs: "h-5 w-5 text-[9px]",
+  sm: "h-6 w-6 text-[10px]",
+  md: "h-8 w-8 text-xs",
+  lg: "h-10 w-10 text-sm",
+  xl: "h-16 w-16 text-lg"
+};
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return (name[0] || "?").toUpperCase();
+}
+function EntityAvatar({
+  photo,
+  name,
+  size = "md",
+  className
+}) {
+  const displayName = name || "?";
+  const color = COLORS[hashCode(displayName) % COLORS.length];
+  const initials = getInitials(displayName);
+  return /* @__PURE__ */ jsxs11(Avatar, { className: cn(SIZE_MAP[size], className), children: [
+    photo && /* @__PURE__ */ jsx19(
+      AvatarImage,
+      {
+        src: photo,
+        alt: displayName,
+        className: "object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsx19(AvatarFallback, { className: cn("font-medium", color), children: initials })
+  ] });
+}
+
+// src/components/image-crop-upload.tsx
+import { useCallback as useCallback3, useRef, useState as useState4 } from "react";
+import Cropper from "react-easy-crop";
+
+// src/components/ui/dialog.tsx
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs12(DialogPortal, { children: [
+    /* @__PURE__ */ jsx20(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs12(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx20(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs12(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm", children: [
+            /* @__PURE__ */ jsx20(X2, {}),
+            /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("gap-2 flex flex-col", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx20(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/slider.tsx
+import * as React2 from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React2.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs13(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx21(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: "bg-muted rounded-full data-horizontal:h-1.5 data-vertical:w-1.5 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full",
+            children: /* @__PURE__ */ jsx21(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: "bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx21(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/image-crop-upload.tsx
+import { toast } from "sonner";
+import { Camera, Trash2 } from "lucide-react";
+
+// src/lib/image-utils.ts
+async function getCroppedImage(imageSrc, cropArea, outputSize = 400, quality = 0.85) {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  canvas.width = outputSize;
+  canvas.height = outputSize;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas context not available");
+  ctx.drawImage(
+    image,
+    cropArea.x,
+    cropArea.y,
+    cropArea.width,
+    cropArea.height,
+    0,
+    0,
+    outputSize,
+    outputSize
+  );
+  const blob = await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("Failed to create blob")),
+      "image/webp",
+      quality
+    );
+  });
+  return blobToBase64(blob);
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      resolve(result.split(",")[1]);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+var ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+var MAX_SIZE_BYTES = 5 * 1024 * 1024;
+function validateImageFile(file) {
+  if (!ACCEPTED_TYPES.includes(file.type)) {
+    return "Formato n\xE3o suportado. Use PNG, JPG ou WEBP";
+  }
+  if (file.size > MAX_SIZE_BYTES) {
+    return "Imagem muito grande. M\xE1ximo: 5MB";
+  }
+  return null;
+}
+function fileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+// src/components/image-crop-upload.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var STORAGE_URL_MAP = {
+  users: "https://gauth-r2-storage.greatlabs.workers.dev",
+  agents: "https://gagents-r2-storage.greatlabs.workers.dev",
+  contacts: "https://gchat-r2-storage.greatlabs.workers.dev",
+  professionals: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  patients: "https://gclinic-r2-storage.greatlabs.workers.dev",
+  clinics: "https://gclinic-r2-storage.greatlabs.workers.dev"
+};
+var BUCKET_MAP = {
+  users: "gauth-r1-storage",
+  agents: "gagents-r1-storage",
+  contacts: "gchat-r1-storage",
+  professionals: "gclinic-r1-storage",
+  patients: "gclinic-r1-storage",
+  clinics: "gclinic-r1-storage"
+};
+var DEFAULT_STORAGE_URL = "https://gauth-r2-storage.greatlabs.workers.dev";
+var DEFAULT_BUCKET = "gauth-r1-storage";
+function ImageCropUpload({
+  value,
+  onChange,
+  onRemove,
+  entityType,
+  entityId,
+  idAccount,
+  name,
+  disabled = false
+}) {
+  const [imageSrc, setImageSrc] = useState4(null);
+  const [crop, setCrop] = useState4({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState4(1);
+  const [croppedArea, setCroppedArea] = useState4(null);
+  const [isOpen, setIsOpen] = useState4(false);
+  const [isUploading, setIsUploading] = useState4(false);
+  const inputRef = useRef(null);
+  const onCropComplete = useCallback3((_, croppedAreaPixels) => {
+    setCroppedArea(croppedAreaPixels);
+  }, []);
+  const handleFileSelect = useCallback3(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const error = validateImageFile(file);
+      if (error) {
+        toast.error(error);
+        if (inputRef.current) inputRef.current.value = "";
+        return;
+      }
+      const dataUrl = await fileToDataUrl(file);
+      setImageSrc(dataUrl);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+      setIsOpen(true);
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    []
+  );
+  const handleConfirmCrop = useCallback3(async () => {
+    if (!imageSrc || !croppedArea) return;
+    setIsUploading(true);
+    try {
+      const base64 = await getCroppedImage(imageSrc, croppedArea);
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+      const res = await fetch(storageUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ file: base64, bucket, path })
+      });
+      const data = await res.json();
+      if (data.status !== 1) {
+        throw new Error(data.message || "Erro ao enviar imagem");
+      }
+      const publicUrl = `${storageUrl}/${path}?t=${Date.now()}`;
+      onChange(publicUrl);
+      toast.success("Imagem atualizada");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Erro ao enviar imagem"
+      );
+    } finally {
+      setIsUploading(false);
+      setIsOpen(false);
+      setImageSrc(null);
+    }
+  }, [imageSrc, croppedArea, entityType, entityId, idAccount, onChange]);
+  const handleRemove = useCallback3(async () => {
+    if (!value) return;
+    try {
+      const path = `${entityType}/${idAccount}/${entityId || "temp"}.webp`;
+      const storageUrl = STORAGE_URL_MAP[entityType] || DEFAULT_STORAGE_URL;
+      const bucket = BUCKET_MAP[entityType] || DEFAULT_BUCKET;
+      await fetch(storageUrl, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ bucket, path })
+      });
+      onRemove?.();
+      toast.success("Imagem removida");
+    } catch {
+      toast.error("Erro ao remover imagem");
+    }
+  }, [value, entityType, entityId, idAccount, onRemove]);
+  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx22(EntityAvatar, { photo: value, name: name ?? null, size: "xl" }),
+      !disabled && /* @__PURE__ */ jsx22(
+        "button",
+        {
+          type: "button",
+          onClick: () => inputRef.current?.click(),
+          className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+          children: /* @__PURE__ */ jsx22(Camera, { className: "h-5 w-5 text-white" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx22(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/png,image/jpeg,image/webp",
+        onChange: handleFileSelect,
+        className: "hidden",
+        disabled
+      }
+    ),
+    !disabled && value && /* @__PURE__ */ jsxs14(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        onClick: handleRemove,
+        className: "text-destructive hover:text-destructive",
+        children: [
+          /* @__PURE__ */ jsx22(Trash2, { className: "h-4 w-4 mr-1" }),
+          "Remover"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx22(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs14(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsx22(DialogHeader, { children: /* @__PURE__ */ jsx22(DialogTitle, { children: "Recortar imagem" }) }),
+      /* @__PURE__ */ jsx22("div", { className: "relative w-full h-72 bg-muted rounded-md overflow-hidden", children: imageSrc && /* @__PURE__ */ jsx22(
+        Cropper,
+        {
+          image: imageSrc,
+          crop,
+          zoom,
+          aspect: 1,
+          onCropChange: setCrop,
+          onZoomChange: setZoom,
+          onCropComplete,
+          cropShape: "round",
+          showGrid: false
+        }
+      ) }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 px-1", children: [
+        /* @__PURE__ */ jsx22("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zoom" }),
+        /* @__PURE__ */ jsx22(
+          Slider,
+          {
+            value: [zoom],
+            onValueChange: (v) => setZoom(v[0]),
+            min: 1,
+            max: 3,
+            step: 0.1,
+            className: "flex-1"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs14(DialogFooter, { children: [
+        /* @__PURE__ */ jsx22(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => {
+              setIsOpen(false);
+              setImageSrc(null);
+            },
+            disabled: isUploading,
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          Button,
+          {
+            onClick: handleConfirmCrop,
+            disabled: isUploading || !croppedArea,
+            children: isUploading ? "Enviando..." : "Confirmar"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
 export {
   AppHeader,
   AppShell,
   AppSidebar,
+  EntityAvatar,
+  ImageCropUpload,
   LoginForm,
   SidebarInset,
   SidebarProvider,