@wealthx/shadcn 1.5.11 → 1.5.13

package/dist/chunk-KICT4VQL.mjs

@@ -0,0 +1,508 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-LI2CTS5O.mjs";
+import {
+  Badge
+} from "./chunk-X6RC5UWB.mjs";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-OWFQSXVD.mjs";
+import {
+  Input
+} from "./chunk-LBTHZSBT.mjs";
+import {
+  Button
+} from "./chunk-NOOEKOWY.mjs";
+import {
+  cn
+} from "./chunk-AFML43VJ.mjs";
+
+// src/components/ui/resource-center/resource-carousel.tsx
+import { useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  GalleryHorizontal,
+  LayoutGrid
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ResourceCarousel({
+  title,
+  items,
+  headerAction,
+  onViewModeChange,
+  className
+}) {
+  const scrollRef = useRef(null);
+  const [viewMode, setViewMode] = useState("compact");
+  function scrollLeft() {
+    var _a;
+    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: -380, behavior: "smooth" });
+  }
+  function scrollRight() {
+    var _a;
+    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: 380, behavior: "smooth" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    (title || headerAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
+        title && /* @__PURE__ */ jsx("h2", { className: "text-h3 text-foreground", children: title }),
+        headerAction && /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-end", children: headerAction })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          value: [viewMode],
+          onValueChange: (v) => {
+            if (v.length > 0) {
+              const mode = v[0];
+              setViewMode(mode);
+              onViewModeChange == null ? void 0 : onViewModeChange(mode);
+            }
+          },
+          "aria-label": "View mode",
+          children: [
+            /* @__PURE__ */ jsx(ToggleGroupItem, { value: "compact", "aria-label": "Compact view", children: /* @__PURE__ */ jsx(GalleryHorizontal, { className: "size-4" }) }),
+            /* @__PURE__ */ jsx(ToggleGroupItem, { value: "grid", "aria-label": "Grid view", children: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }) })
+          ]
+        }
+      )
+    ] }),
+    items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-body-small text-muted-foreground", children: "No items available" }) : viewMode === "grid" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-6 max-[1280px]:grid-cols-3 max-[900px]:grid-cols-2 max-[600px]:grid-cols-1", children: items.map((item, i) => /* @__PURE__ */ jsx("div", { children: item }, i)) }) : /* @__PURE__ */ jsxs("div", { className: "group/track relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: scrollLeft,
+          "aria-label": "Scroll left",
+          className: cn(
+            "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+            "flex size-9 items-center justify-center",
+            "border border-border bg-background shadow-sm",
+            "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 text-foreground" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex gap-4 overflow-x-auto scroll-smooth pb-2",
+          style: { scrollbarWidth: "none" },
+          children: items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "w-[360px] shrink-0", children: item }, i))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: scrollRight,
+          "aria-label": "Scroll right",
+          className: cn(
+            "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
+            "flex size-9 items-center justify-center",
+            "border border-border bg-background shadow-sm",
+            "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-foreground" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/resource-center/resource-center-header.tsx
+import { useState as useState2 } from "react";
+import { Play } from "lucide-react";
+
+// src/components/ui/resource-center/resource-modal.tsx
+import { Download } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ResourceModal({
+  open,
+  onClose,
+  title,
+  videoUrl,
+  tags,
+  attachments
+}) {
+  return /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs2(
+    DialogContent,
+    {
+      size: "2xl",
+      className: "flex flex-col gap-4 p-0 overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs2(DialogHeader, { className: "px-6 pt-6 pb-0", children: [
+          /* @__PURE__ */ jsx2(DialogTitle, { className: "text-h5", children: title }),
+          tags && tags.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1.5 pt-1", children: tags.map((tag) => /* @__PURE__ */ jsx2(Badge, { variant: "secondary", children: tag }, tag)) })
+        ] }),
+        videoUrl && /* @__PURE__ */ jsx2("div", { className: "aspect-video w-full bg-foreground", children: /* @__PURE__ */ jsx2(
+          "iframe",
+          {
+            src: videoUrl,
+            title,
+            className: "h-full w-full",
+            allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+            allowFullScreen: true
+          }
+        ) }),
+        attachments && attachments.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 px-6 pb-6", children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-body-small font-medium text-foreground", children: "Attachments" }),
+          /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-1", children: attachments.map((attachment, i) => /* @__PURE__ */ jsxs2(
+            "a",
+            {
+              href: attachment.url,
+              download: true,
+              className: "flex items-center gap-2 text-body-small text-primary hover:underline",
+              children: [
+                /* @__PURE__ */ jsx2(Download, { className: "size-3.5 shrink-0" }),
+                attachment.name
+              ]
+            },
+            i
+          )) })
+        ] }),
+        (!attachments || attachments.length === 0) && /* @__PURE__ */ jsx2("div", { className: "pb-2" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/resource-center/resource-center-header.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ResourceCenterHeader({
+  title,
+  description,
+  backgroundImageUrl,
+  backgroundVideoUrl,
+  watchVideoUrl
+}) {
+  const [watchModalOpen, setWatchModalOpen] = useState2(false);
+  const hasBackground = !!backgroundImageUrl || !!backgroundVideoUrl;
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "relative flex min-h-[480px] w-full items-center overflow-hidden max-[900px]:min-h-[360px] max-[600px]:min-h-[260px]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 z-[0]",
+                hasBackground ? "bg-foreground" : "bg-gradient-to-br from-primary to-foreground"
+              )
+            }
+          ),
+          backgroundImageUrl && !backgroundVideoUrl && /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: backgroundImageUrl,
+              alt: "",
+              "aria-hidden": "true",
+              className: "absolute inset-0 h-full w-full object-cover z-[1]"
+            }
+          ),
+          backgroundVideoUrl && /* @__PURE__ */ jsx3(
+            "video",
+            {
+              className: "absolute inset-0 h-full w-full object-cover z-[1]",
+              src: backgroundVideoUrl,
+              autoPlay: true,
+              muted: true,
+              loop: true,
+              playsInline: true
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 z-[2]",
+                hasBackground ? "bg-black/50" : "bg-black/20"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "relative z-[3] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl", children: [
+            /* @__PURE__ */ jsx3("h1", { className: "text-[56px] font-bold text-white leading-none max-[900px]:text-[40px] max-[600px]:text-[32px]", children: title }),
+            /* @__PURE__ */ jsx3("p", { className: "text-body-medium text-white/80 leading-relaxed", children: description }),
+            watchVideoUrl && /* @__PURE__ */ jsx3("div", { className: "pt-2", children: /* @__PURE__ */ jsxs3(Button, { variant: "default", onClick: () => setWatchModalOpen(true), children: [
+              /* @__PURE__ */ jsx3(Play, { className: "mr-2 size-4" }),
+              "Watch Now"
+            ] }) })
+          ] })
+        ]
+      }
+    ),
+    watchVideoUrl && /* @__PURE__ */ jsx3(
+      ResourceModal,
+      {
+        open: watchModalOpen,
+        onClose: () => setWatchModalOpen(false),
+        title,
+        videoUrl: watchVideoUrl
+      }
+    )
+  ] });
+}
+
+// src/components/ui/resource-center/resource-cards.tsx
+import { useState as useState3 } from "react";
+import { Download as Download2, Play as Play2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ResourceVideoCard({ video }) {
+  const [modalOpen, setModalOpen] = useState3(false);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setModalOpen(true),
+        className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "relative w-full overflow-hidden bg-muted aspect-video", children: [
+            video.thumbnailUrl ? /* @__PURE__ */ jsx4(
+              "img",
+              {
+                src: video.thumbnailUrl,
+                alt: video.title,
+                className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+              }
+            ) : /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx4(Play2, { className: "size-10 text-muted-foreground opacity-40" }) }),
+            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsx4("div", { className: "flex size-12 items-center justify-center bg-background/90", children: /* @__PURE__ */ jsx4(Play2, { className: "size-5 text-foreground" }) }) }),
+            video.duration && /* @__PURE__ */ jsx4("span", { className: "absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-caption text-white", children: video.duration })
+          ] }),
+          /* @__PURE__ */ jsx4("p", { className: "text-body-medium font-semibold text-foreground leading-snug line-clamp-2", children: video.title })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      ResourceModal,
+      {
+        open: modalOpen,
+        onClose: () => setModalOpen(false),
+        title: video.title,
+        videoUrl: video.videoUrl,
+        tags: video.tags,
+        attachments: video.attachments
+      }
+    )
+  ] });
+}
+function ResourceEmailTemplateCard({
+  template,
+  onClick
+}) {
+  if (template.isAddTemplate) {
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(
+          "flex w-full flex-col items-center justify-center gap-3",
+          "border-2 border-dashed border-border bg-muted/40",
+          "aspect-video hover:border-primary hover:bg-muted/70 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40", children: /* @__PURE__ */ jsx4("span", { className: "text-2xl text-muted-foreground/60", children: "+" }) }),
+          /* @__PURE__ */ jsx4("p", { className: "text-body-small font-medium text-muted-foreground", children: "Add Template" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "relative w-full overflow-hidden border border-border bg-background aspect-video", children: [
+          template.htmlContent ? /* @__PURE__ */ jsx4(
+            "iframe",
+            {
+              srcDoc: template.htmlContent,
+              title: template.title,
+              className: "h-full w-full pointer-events-none",
+              style: {
+                transform: "scale(0.5)",
+                transformOrigin: "top left",
+                width: "200%",
+                height: "200%"
+              },
+              sandbox: "allow-same-origin"
+            }
+          ) : /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center justify-center bg-muted", children: /* @__PURE__ */ jsx4("p", { className: "text-caption text-muted-foreground", children: "No preview available" }) }),
+          /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ jsx4("span", { className: "text-body-small font-medium text-white", children: "Use Template" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: template.title }),
+          template.type && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "shrink-0", children: template.type === "system" ? "System" : "Company" })
+        ] })
+      ]
+    }
+  );
+}
+function ResourceDocumentCard({
+  document,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: "group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-video",
+        children: [
+          document.pdfUrl ? /* @__PURE__ */ jsx4(
+            "iframe",
+            {
+              src: document.pdfUrl,
+              title: document.title,
+              className: "h-full w-full pointer-events-none"
+            }
+          ) : document.thumbnailUrl ? /* @__PURE__ */ jsx4(
+            "img",
+            {
+              src: document.thumbnailUrl,
+              alt: document.title,
+              className: "h-full w-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsxs4("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center bg-muted-foreground/10 p-4", children: /* @__PURE__ */ jsx4(Download2, { className: "size-8 text-muted-foreground opacity-50" }) }),
+            /* @__PURE__ */ jsx4("span", { className: "text-caption text-muted-foreground", children: document.title })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1 min-w-0", children: [
+        /* @__PURE__ */ jsx4("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: document.title }),
+        document.tags && document.tags.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: document.tags.map((tag) => /* @__PURE__ */ jsx4(Badge, { variant: "secondary", children: tag }, tag)) })
+      ] }),
+      document.downloadUrl && /* @__PURE__ */ jsx4(
+        "a",
+        {
+          href: document.downloadUrl,
+          download: true,
+          onClick: (e) => e.stopPropagation(),
+          className: "shrink-0",
+          "aria-label": `Download ${document.title}`,
+          children: /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "icon", className: "size-8", children: /* @__PURE__ */ jsx4(Download2, { className: "size-4" }) })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/resource-center/resource-email-editor-dialog.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var EDITOR_CONTENT_TYPES = [
+  "Columns",
+  "Button",
+  "Divider",
+  "Heading",
+  "Paragraph",
+  "Image",
+  "Social",
+  "Menu",
+  "HTML"
+];
+function ResourceEmailEditorDialog({
+  open,
+  onClose,
+  onSave,
+  editorSlot
+}) {
+  const [templateName, setTemplateName] = useState4("");
+  function handleSave() {
+    onSave(templateName);
+  }
+  function handleClose() {
+    setTemplateName("");
+    onClose();
+  }
+  return /* @__PURE__ */ jsx5(Dialog, { open, onOpenChange: (v) => !v && handleClose(), children: /* @__PURE__ */ jsxs5(
+    DialogContent,
+    {
+      size: "4xl",
+      className: "flex flex-col gap-0 p-0 overflow-hidden h-[90vh]",
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "shrink-0 border-b border-border px-6 py-4", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-label-small text-muted-foreground mb-1", children: "Template Name" }),
+          /* @__PURE__ */ jsx5(
+            Input,
+            {
+              placeholder: "Enter template name",
+              value: templateName,
+              onChange: (e) => setTemplateName(e.target.value),
+              className: "border-none shadow-none px-0 text-body-medium h-auto focus-visible:ring-0 bg-transparent"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "flex-1 overflow-hidden", children: editorSlot != null ? editorSlot : /* @__PURE__ */ jsx5(EditorPlaceholder, {}) }),
+        /* @__PURE__ */ jsxs5("div", { className: "shrink-0 flex items-center justify-between border-t border-border px-6 py-4", children: [
+          /* @__PURE__ */ jsx5(Button, { variant: "outline", onClick: handleClose, children: "Back" }),
+          /* @__PURE__ */ jsx5(Button, { variant: "default", onClick: handleSave, children: "Save Email" })
+        ] })
+      ]
+    }
+  ) });
+}
+function EditorPlaceholder() {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex flex-1 items-center justify-center bg-[#f4f4f4]", children: /* @__PURE__ */ jsx5("div", { className: "max-w-[500px] w-full border-2 border-dashed border-[#9ecbf0] bg-[#e8f4ff] px-16 py-10 text-center", children: /* @__PURE__ */ jsx5("p", { className: "text-body-small text-[#5c9fd8]", children: "No content here. Drag content from right." }) }) }),
+    /* @__PURE__ */ jsxs5("div", { className: "w-[280px] shrink-0 flex flex-col border-l border-border bg-background", children: [
+      /* @__PURE__ */ jsx5("div", { className: "flex border-b border-border", children: ["Content", "Blocks", "Body"].map((tab, i) => /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "flex flex-1 flex-col items-center gap-1 py-3 text-caption",
+            i === 0 ? "text-foreground border-b-2 border-foreground" : "text-muted-foreground"
+          ),
+          children: tab
+        },
+        tab
+      )) }),
+      /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-3 gap-2 p-3", children: EDITOR_CONTENT_TYPES.map((item) => /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "flex flex-col items-center gap-1.5 border border-border p-2 hover:bg-muted transition-colors cursor-grab",
+          children: [
+            /* @__PURE__ */ jsx5("div", { className: "size-6 bg-foreground/10 flex items-center justify-center", children: /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-foreground/40", children: "\u25A4" }) }),
+            /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-foreground leading-none text-center", children: item })
+          ]
+        },
+        item
+      )) }),
+      /* @__PURE__ */ jsx5("div", { className: "mt-auto border-t border-border py-2.5 text-center", children: /* @__PURE__ */ jsx5("span", { className: "text-caption text-muted-foreground", children: "\u26A1 by Unlayer Editor" }) })
+    ] })
+  ] });
+}
+
+export {
+  ResourceCarousel,
+  ResourceModal,
+  ResourceCenterHeader,
+  ResourceVideoCard,
+  ResourceEmailTemplateCard,
+  ResourceDocumentCard,
+  ResourceEmailEditorDialog
+};