@sesionario/blocks 1.21.0 → 1.22.1

package/dist/index.cjs

@@ -1686,17 +1686,17 @@ function TenantAvatar({
   logo,
   size = "md"
 }) {
-  const sizeClass = size === "sm" ? "size-6 rounded-md" : "size-8 rounded-lg";
+  const sizeClass = size === "sm" ? "size-6" : "size-8";
   const textClass = size === "sm" ? "text-xs" : "text-sm";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex shrink-0 items-center justify-center overflow-hidden font-medium",
+        "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium",
         sizeClass
       ),
       style: logo ? void 0 : avatarFallbackStyle(name),
-      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: getInitials(name) })
+      children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "absolute -inset-px object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: getInitials(name) })
     }
   );
 }
@@ -1713,7 +1713,7 @@ function SwitcherSkeleton({
           "pointer-events-none flex size-8 items-center justify-center rounded-md",
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" })
       }
     );
   }
@@ -1726,7 +1726,7 @@ function SwitcherSkeleton({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 animate-pulse rounded-full bg-muted" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-16 animate-pulse rounded bg-muted" })
@@ -1769,7 +1769,7 @@ function OrgSwitcher({
             triggerClassNameProp
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
             !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: labels.empty }) }) : null
           ]
         }
@@ -1786,7 +1786,7 @@ function OrgSwitcher({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4 text-muted-foreground" }) }),
           !collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid min-w-0 flex-1 text-left leading-tight", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-muted-foreground", children: labels.empty }) }) : null
         ]
       }
@@ -2223,14 +2223,7 @@ function MenuAvatar({
         "relative flex shrink-0 overflow-hidden rounded-full",
         sizeClass
       ),
-      children: image ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: image,
-          alt: "",
-          className: "aspect-square size-full object-cover"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      children: image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: "", className: "absolute -inset-px object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "flex size-full items-center justify-center text-xs font-semibold",
@@ -2672,8 +2665,6 @@ function AvatarEditor({
     canvas.width = displaySize;
     canvas.height = displaySize;
     ctx.clearRect(0, 0, displaySize, displaySize);
-    ctx.fillStyle = "#1a1a2e";
-    ctx.fillRect(0, 0, displaySize, displaySize);
     ctx.save();
     ctx.translate(displaySize / 2, displaySize / 2);
     ctx.rotate(rotation * Math.PI / 180);
@@ -2695,28 +2686,6 @@ function AvatarEditor({
       drawHeight
     );
     ctx.restore();
-    ctx.globalCompositeOperation = "destination-in";
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 4,
-      0,
-      Math.PI * 2
-    );
-    ctx.fill();
-    ctx.globalCompositeOperation = "source-over";
-    ctx.strokeStyle = "hsl(var(--primary))";
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    ctx.arc(
-      displaySize / 2,
-      displaySize / 2,
-      displaySize / 2 - 2,
-      0,
-      Math.PI * 2
-    );
-    ctx.stroke();
     const dataUrl = generateOutput();
     if (dataUrl) {
       onChange?.(dataUrl);
@@ -2822,6 +2791,8 @@ function AvatarEditor({
   const gapSize = isLarge ? "gap-6" : "gap-4";
   const controlGap = isLarge ? "gap-3" : "gap-2";
   const sliderHeight = isLarge ? "[&_[role=slider]]:h-6 [&_[role=slider]]:w-6" : "";
+  const guideRadius = size / 2 - 2;
+  const guideCenter = size / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2885,6 +2856,36 @@ function AvatarEditor({
                   onTouchEnd: handleMouseUp
                 }
               ),
+              imageLoaded && /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: size,
+                  height: size,
+                  className: "pointer-events-none absolute inset-0",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: `M0 0H${size}V${size}H0Z M${guideCenter - guideRadius} ${guideCenter}a${guideRadius} ${guideRadius} 0 1 0 ${guideRadius * 2} 0a${guideRadius} ${guideRadius} 0 1 0 ${-guideRadius * 2} 0`,
+                        fill: "rgb(0 0 0 / 0.45)",
+                        fillRule: "evenodd"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: guideCenter,
+                        cy: guideCenter,
+                        r: guideRadius,
+                        fill: "none",
+                        stroke: "hsl(var(--primary))",
+                        strokeWidth: "3"
+                      }
+                    )
+                  ]
+                }
+              ),
               showGrid && imageLoaded && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -3434,14 +3435,14 @@ function AvatarEditorDialog({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "w-full h-full rounded-full overflow-hidden bg-muted border-2 border-border flex items-center justify-center",
+            className: "relative w-full h-full rounded-full overflow-hidden bg-muted border-2 border-border flex items-center justify-center",
             style: { width: displaySize, height: displaySize },
             children: value ? /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
                 src: value || "/placeholder.svg",
                 alt: "Avatar",
-                className: "w-full h-full object-cover"
+                className: "absolute -inset-px object-cover"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
@@ -7332,6 +7333,32 @@ function PaymentIcon({
     }
   );
 }
+var BrandX = React7.forwardRef(function BrandX2({
+  className,
+  size = 24,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) {
+  const labelled = Boolean(ariaLabel || ariaLabelledby);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-hidden": labelled ? void 0 : true,
+      width: size,
+      height: size,
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" })
+    }
+  );
+});
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8676,6 +8703,7 @@ Object.defineProperty(exports, "useMessageScrollerVisibility", {
 });
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
+exports.BrandX = BrandX;
 exports.Bubble = Bubble;
 exports.BubbleContent = BubbleContent;
 exports.BubbleGroup = BubbleGroup;