@sesionario/blocks 1.0.1 → 1.1.0

package/README.md

@@ -19,6 +19,21 @@ Peer dependencies (install in the consuming app as needed):
 - `react-phone-number-input` (PhoneInput — also import its CSS in your app layout)
 - `hls.js` (optional — VideoPlayer)
 
+### Chat UI (`MessageScroller`, `ChatMessageList`, …)
+
+Apps that render chat scrollers should define this utility in global CSS (used by `MessageScrollerViewport`):
+
+```css
+.scroll-fade-b {
+	mask-image: linear-gradient(
+		to bottom,
+		#000 0%,
+		#000 calc(100% - 1.5rem),
+		transparent 100%
+	);
+}
+```
+
 ## Development
 
 ```bash

package/dist/index.cjs

@@ -20,6 +20,7 @@ var cmdk = require('cmdk');
 var RPNInput = require('react-phone-number-input');
 var flags = require('react-phone-number-input/flags');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var messageScroller = require('@shadcn/react/message-scroller');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -4234,9 +4235,400 @@ function VerifiedProfessionalBadge({
     }
   );
 }
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageAvatar({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-avatar",
+      className: cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-header",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = classVarianceAuthority.cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "bubble-content",
+      className: cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var bubbleReactionsVariants = classVarianceAuthority.cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+var markerVariants = classVarianceAuthority.cva(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2"
+      }
+    }
+  }
+);
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "marker",
+      "data-variant": variant,
+      className: cn(markerVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function MarkerIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "marker-icon",
+      "aria-hidden": "true",
+      className: cn(
+        "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MarkerContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "marker-content",
+      className: cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScroller.Provider, { ...props });
+}
+function MessageScroller({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScroller.Root,
+    {
+      "data-slot": "message-scroller",
+      className: cn(
+        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScroller.Viewport,
+    {
+      "data-slot": "message-scroller-viewport",
+      className: cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScroller.Content,
+    {
+      "data-slot": "message-scroller-content",
+      className: cn("flex h-max min-h-full flex-col gap-8", className),
+      ...props
+    }
+  );
+}
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScroller.Item,
+    {
+      "data-slot": "message-scroller-item",
+      scrollAnchor,
+      className: cn(
+        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    messageScroller.MessageScroller.Button,
+    {
+      "data-slot": "message-scroller-button",
+      "data-direction": direction,
+      "data-variant": variant,
+      "data-size": size,
+      direction,
+      className: cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className
+      ),
+      render: render ?? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant, size }),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: direction === "end" ? "Ir al final" : "Ir al inicio" })
+      ] })
+    }
+  );
+}
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+function ChatMessageList({
+  messages,
+  currentUserId,
+  emptyTitle = "Sin mensajes",
+  emptyDescription = "Escribe para iniciar la conversaci\xF3n."
+}) {
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-6 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleDashedIcon, { className: "size-8 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: emptyTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: emptyDescription })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxRuntime.jsxs(MessageScroller, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerContent, { className: "gap-4 p-4", children: messages.map((m) => {
+      const mine = Boolean(currentUserId) && m.senderId === currentUserId;
+      const align = mine ? "end" : "start";
+      return /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerItem, { scrollAnchor: mine, children: m.deleted ? /* @__PURE__ */ jsxRuntime.jsx(Marker, { variant: "separator", children: /* @__PURE__ */ jsxRuntime.jsxs(MarkerContent, { children: [
+        "Mensaje eliminado \xB7 ",
+        m.senderName
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Message, { align, children: [
+        !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageAvatar, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground", children: initials(m.senderName) }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { children: [
+          !mine ? /* @__PURE__ */ jsxRuntime.jsx(MessageHeader, { children: m.senderName }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Bubble,
+            {
+              variant: mine ? "default" : "muted",
+              align,
+              children: /* @__PURE__ */ jsxRuntime.jsx(BubbleContent, { children: m.body })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(MessageFooter, { children: new Date(m.createdAt).toLocaleString("es-MX") })
+        ] })
+      ] }) }, m.id);
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(MessageScrollerButton, {})
+  ] }) });
+}
 
+Object.defineProperty(exports, "useMessageScroller", {
+  enumerable: true,
+  get: function () { return messageScroller.useMessageScroller; }
+});
+Object.defineProperty(exports, "useMessageScrollerScrollable", {
+  enumerable: true,
+  get: function () { return messageScroller.useMessageScrollerScrollable; }
+});
+Object.defineProperty(exports, "useMessageScrollerVisibility", {
+  enumerable: true,
+  get: function () { return messageScroller.useMessageScrollerVisibility; }
+});
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
+exports.Bubble = Bubble;
+exports.BubbleContent = BubbleContent;
+exports.BubbleGroup = BubbleGroup;
+exports.BubbleReactions = BubbleReactions;
+exports.ChatMessageList = ChatMessageList;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
 exports.Empty = Empty;
@@ -4252,6 +4644,21 @@ exports.LanguageSwitcher = LanguageSwitcher;
 exports.LoadingState = LoadingState;
 exports.MEXICO_STATES = MEXICO_STATES;
 exports.MEXICO_STATE_PATHS = MEXICO_STATE_PATHS;
+exports.Marker = Marker;
+exports.MarkerContent = MarkerContent;
+exports.MarkerIcon = MarkerIcon;
+exports.Message = Message;
+exports.MessageAvatar = MessageAvatar;
+exports.MessageContent = MessageContent;
+exports.MessageFooter = MessageFooter;
+exports.MessageGroup = MessageGroup;
+exports.MessageHeader = MessageHeader;
+exports.MessageScroller = MessageScroller;
+exports.MessageScrollerButton = MessageScrollerButton;
+exports.MessageScrollerContent = MessageScrollerContent;
+exports.MessageScrollerItem = MessageScrollerItem;
+exports.MessageScrollerProvider = MessageScrollerProvider;
+exports.MessageScrollerViewport = MessageScrollerViewport;
 exports.MexicoMap = MexicoMap;
 exports.OrgSwitcher = OrgSwitcher;
 exports.PhoneInput = PhoneInput;
@@ -4259,12 +4666,14 @@ exports.SearchCommand = SearchCommand;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.VerifiedProfessionalBadge = VerifiedProfessionalBadge;
 exports.VideoPlayer = VideoPlayer;
+exports.bubbleVariants = bubbleVariants;
 exports.cn = cn;
 exports.createLiveHlsConfig = createLiveHlsConfig;
 exports.createVodHlsConfig = createVodHlsConfig;
 exports.defaultLanguages = defaultLanguages;
 exports.describePlaybackError = describePlaybackError;
 exports.fuzzyMatch = fuzzyMatch;
+exports.markerVariants = markerVariants;
 exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;