@particle-academy/react-fancy 3.4.3 → 4.0.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, createContext, useId, useRef, useEffect, useState, useCallback, useMemo, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { forwardRef, createContext, useId, useRef, useEffect, useState, useCallback, useMemo, Children, isValidElement, useLayoutEffect, cloneElement, useContext, Fragment as Fragment$1 } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
@@ -2323,7 +2323,7 @@ function parseSortOrder(sort) {
   }
   return valid;
 }
-var Action = forwardRef(
+var Button = forwardRef(
   ({
     children,
     className,
@@ -2486,12 +2486,13 @@ var Action = forwardRef(
       trailingElements
     ] });
     const safeHref = sanitizeHref(href);
-    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsx("a", { href: safeHref, className: classes, "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsx(
+    const buttonEl = safeHref && !disabled ? /* @__PURE__ */ jsx("a", { href: safeHref, className: classes, "data-react-fancy-button": "", "data-react-fancy-action": "", children: content }) : /* @__PURE__ */ jsx(
       "button",
       {
         ref,
         className: classes,
         disabled: disabled || loading,
+        "data-react-fancy-button": "",
         "data-react-fancy-action": "",
         ...props,
         children: content
@@ -2555,7 +2556,8 @@ var Action = forwardRef(
     return buttonEl;
   }
 );
-Action.displayName = "Action";
+Button.displayName = "Button";
+var Action = Button;
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const isControlled = controlledValue !== void 0;
@@ -6392,6 +6394,98 @@ var Callout = forwardRef(
   }
 );
 Callout.displayName = "Callout";
+var DOT_COLORS = ["bg-rose-300", "bg-amber-300", "bg-green-300"];
+var FauxClient = forwardRef(
+  ({
+    variant = "browser",
+    url,
+    meta,
+    dots = true,
+    width,
+    scale = "fit",
+    className,
+    barClassName,
+    bodyClassName,
+    children,
+    ...rest
+  }, ref) => {
+    const scaled = typeof width === "number";
+    const viewportRef = useRef(null);
+    const stageRef = useRef(null);
+    const [s, setS] = useState(typeof scale === "number" ? scale : 1);
+    const [contentHeight, setContentHeight] = useState(void 0);
+    useLayoutEffect(() => {
+      if (!scaled) return;
+      const viewport = viewportRef.current;
+      const stage = stageRef.current;
+      if (!viewport || !stage) return;
+      if (typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const avail = viewport.clientWidth;
+        const next = scale === "fit" ? width && width > 0 ? avail / width : 1 : scale;
+        const naturalHeight = stage.offsetHeight;
+        setS(next);
+        setContentHeight(naturalHeight * next);
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(viewport);
+      ro.observe(stage);
+      return () => ro.disconnect();
+    }, [scaled, scale, width]);
+    const isBrowser = variant === "browser";
+    const isDevice = variant === "device";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-faux-client": "",
+        className: cn(
+          "overflow-hidden bg-white dark:bg-zinc-900",
+          isBrowser && "rounded-2xl border border-zinc-200 shadow-xl dark:border-zinc-800",
+          isDevice && "rounded-[2rem] border-[10px] border-zinc-800 shadow-2xl dark:border-zinc-700",
+          variant === "bare" && "rounded-lg border border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        ...rest,
+        children: [
+          isBrowser && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 border-b border-zinc-200 bg-zinc-50 px-3.5 py-2.5 font-mono text-[11.5px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400",
+                barClassName
+              ),
+              children: [
+                dots && /* @__PURE__ */ jsx("div", { className: "mr-1.5 flex gap-[5px]", children: DOT_COLORS.map((color, i) => /* @__PURE__ */ jsx("span", { className: cn("h-[9px] w-[9px] rounded-full", color) }, i)) }),
+                url != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: url }),
+                meta != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-zinc-400 dark:text-zinc-500", children: meta })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewportRef,
+              className: cn("relative overflow-hidden", bodyClassName),
+              style: scaled ? { height: contentHeight } : void 0,
+              children: scaled ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: stageRef,
+                  className: "absolute left-0 top-0 origin-top-left",
+                  style: { width, transform: `scale(${s})` },
+                  children
+                }
+              ) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FauxClient.displayName = "FauxClient";
 var colorClasses5 = {
   yellow: "bg-amber-100 text-amber-950 dark:bg-amber-200 dark:text-amber-950",
   blue: "bg-sky-100 text-sky-950 dark:bg-sky-200 dark:text-sky-950",
@@ -12147,7 +12241,7 @@ function ReasonTag({
         /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
         /* @__PURE__ */ jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: s.href ? /* @__PURE__ */ jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
       ] }),
-      onFollowUp && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx(Action, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+      onFollowUp && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
     ] }) })
   ] });
 }
@@ -12587,7 +12681,7 @@ function PromptInput({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-200 bg-zinc-50/60 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/40", children: [
           /* @__PURE__ */ jsx(Tooltip, { content: "Drop files here, or click", children: /* @__PURE__ */ jsx(
-            Action,
+            Button,
             {
               variant: "ghost",
               size: "sm",
@@ -12620,7 +12714,7 @@ function PromptInput({
               " ",
               "to send"
             ] }),
-            /* @__PURE__ */ jsx(Action, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
+            /* @__PURE__ */ jsx(Button, { color: "violet", size: "sm", onClick: submit, children: "send \u2192" })
           ] })
         ] })
       ]
@@ -13238,7 +13332,7 @@ function Wand({
             ] })
           ] }),
           actions.map((a) => /* @__PURE__ */ jsxs(
-            Action,
+            Button,
             {
               size: "sm",
               variant: "ghost",
@@ -13314,6 +13408,6 @@ function caretRect(ta, start, end) {
   return { x, y };
 }
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FileUpload, Heading, Icon, Input, InputTag, Kanban, MagicWand, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map