@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/components-34txk9rj.js

@@ -0,0 +1,35 @@
+// lib/size-scale.ts
+var sizeMap2 = {
+  default: {
+    variant: "default",
+    control: "h-9",
+    controlHeight: 36,
+    segmentItem: "h-7",
+    segmentPad: "p-1",
+    text: "text-body",
+    px: "px-3",
+    itemPx: "px-2",
+    gap: "gap-2",
+    icon: 16
+  },
+  compact: {
+    variant: "compact",
+    control: "h-7",
+    controlHeight: 28,
+    segmentItem: "h-6",
+    segmentPad: "p-0.5",
+    text: "text-body-compact",
+    px: "px-2.5",
+    itemPx: "px-1.5",
+    gap: "gap-1",
+    icon: 14
+  }
+};
+var typeScale2 = {
+  display: { default: 28, compact: 24 },
+  title: { default: 16, compact: 15 },
+  subtitle: { default: 14, compact: 13 },
+  body: { default: 13, compact: 12 },
+  caption: { default: 12, compact: 11 }
+};
+export { sizeMap2, typeScale2 };

package/dist/shared/components-3h92d94m.js

@@ -0,0 +1,23 @@
+"use client";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+
+// primitives/separator/index.tsx
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var ORIENTATION = {
+  horizontal: "h-px w-full",
+  vertical: "w-px self-stretch"
+};
+var Separator2 = forwardRef(({ orientation = "horizontal", className, ...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive, {
+  ref,
+  ...props,
+  orientation,
+  className: cn2("shrink-0 bg-border", ORIENTATION[orientation], className)
+}));
+Separator2.displayName = "Separator";
+var separator_default = Separator2;
+
+export { Separator2, separator_default };

package/dist/shared/{components-zfnmn5d4.js → components-3sp623ae.js}

@@ -1,39 +1,44 @@
+"use client";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
-  MorphPartScope,
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  MorphPartScope2
+} from "./components-b1e239g3.js";
 import {
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSizeVariant2,
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  slotRender2
+} from "./components-vfjc9jzz.js";
 import {
-  slotRender
-} from "./components-3ky44908.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   Button2
-} from "./components-b2wyq2cq.js";
+} from "./components-7d4r7hh1.js";
 
 // components/overlays/dialog/index.tsx
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
@@ -54,7 +59,7 @@ var DialogContext = createContext({
 });
 var useDialogState2 = () => useContext(DialogContext);
 var DialogTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
-  const el = slotRender(render, asChild, children);
+  const el = slotRender2(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
     ref,
     render: el,
@@ -67,7 +72,7 @@ var DialogTrigger2 = forwardRef(({ render, asChild, children, ...props }, ref) =
 });
 DialogTrigger2.displayName = "DialogTrigger";
 var DialogClose2 = forwardRef(({ render, asChild, children, ...props }, ref) => {
-  const el = slotRender(render, asChild, children);
+  const el = slotRender2(render, asChild, children);
   return el ? /* @__PURE__ */ jsx(DialogPrimitive.Close, {
     ref,
     render: el,
@@ -92,13 +97,13 @@ var DialogContent2 = forwardRef(({
   tier,
   ...props
 }, ref) => {
-  const XIcon = useIcon("x");
-  const shape = useShape();
+  const XIcon = useIcon2("x");
+  const shape = useShape2();
   const substrate = useSurface2();
   const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8);
   const compact = useSize2().variant === "compact";
   const { open, origin } = useDialogState2();
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
     container: container ?? undefined,
@@ -115,10 +120,10 @@ var DialogContent2 = forwardRef(({
         className: cn2(container ? "absolute" : "fixed", "left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none", position === "top" ? "top-[12dvh]" : "top-1/2 -translate-y-1/2", size === "sm" && (compact ? "max-w-[360px]" : "max-w-[400px]"), size === "lg" && (compact ? "max-w-[480px]" : "max-w-[540px]"), size === "xl" && (compact ? "max-w-[800px]" : "max-w-[880px]")),
         children: /* @__PURE__ */ jsx(SurfaceProvider2, {
           value: dialogLevel,
-          children: /* @__PURE__ */ jsxs(MorphSurface, {
+          children: /* @__PURE__ */ jsxs(MorphSurface2, {
             morph,
-            bg: SURFACE_BG[dialogLevel],
-            shadow: SURFACE_SHADOW[dialogLevel],
+            bg: SURFACE_BG2[dialogLevel],
+            shadow: SURFACE_SHADOW2[dialogLevel],
             radius: shape.container,
             className: cn2("p-6", className),
             children: [
@@ -176,14 +181,14 @@ var DialogDescription2 = forwardRef(({ className, ...props }, ref) => {
 });
 DialogDescription2.displayName = "DialogDescription";
 function DialogState2({ open, defaultOpen = false, onOpenChange, children }) {
-  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
-  const { origin, capture } = useMorphOrigin();
+  const [current, setCurrent] = useControllableState2(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin2();
   const id = useId();
   const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
   const parts = useMemo(() => ({ id, open: current }), [id, current]);
   return /* @__PURE__ */ jsx(DialogContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsx(MorphPartScope.Provider, {
+    children: /* @__PURE__ */ jsx(MorphPartScope2.Provider, {
       value: parts,
       children: children({
         open: current,

package/dist/shared/{components-jwst3vtj.js → components-3wxkjgqn.js}

@@ -1,46 +1,52 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useIcons2
+} from "./components-jqpefjsn.js";
 import {
-  GooFilter
-} from "./components-0q0sqfh4.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  GOO_BLUR_RATIO,
-  holdExit
-} from "./components-hqeq3w9q.js";
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  GOO_BLUR_RATIO2,
+  holdExit2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  GooFilter2
+} from "./components-4y816hwp.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
   sizeMap2
-} from "./components-0sn7ypjw.js";
+} from "./components-34txk9rj.js";
+import {
+  slotRender2
+} from "./components-vfjc9jzz.js";
 import {
-  slotRender
-} from "./components-3ky44908.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   button_default
-} from "./components-b2wyq2cq.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-7d4r7hh1.js";
 
 // components/overlays/toast/index.tsx
-import { Toast as ToastPrimitive } from "@base-ui/react/toast";
-import { ArrowRight, Check, CircleAlert, Info, LoaderCircle, X } from "lucide-react";
+import { Toast as ToastPrimitive2 } from "@base-ui/react/toast";
 import { AnimatePresence, motion } from "motion/react";
 import {
   cloneElement,
   createContext,
   forwardRef,
+  isValidElement as isValidElement2,
   useContext,
   useEffect,
   useId,
@@ -49,14 +55,102 @@ import {
   useRef,
   useState
 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// components/overlays/toast/manager.ts
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { isValidElement } from "react";
+var isActionButton = (action) => typeof action === "object" && action !== null && !isValidElement(action) && ("label" in action);
+function defined(value) {
+  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined));
+}
+function toManagerOptions(input) {
+  const { action, icon, duration, timeout, ...rest } = typeof input === "string" ? { title: input } : input;
+  const button = isActionButton(action);
+  return defined({
+    ...rest,
+    timeout: timeout ?? duration,
+    actionProps: button ? { children: action.label, onClick: action.onClick } : undefined,
+    data: icon !== undefined || action !== undefined && !button ? { icon, action: button ? undefined : action } : undefined
+  });
+}
+var withType = (input, type) => typeof input === "string" ? { title: input, type } : { ...input, type };
+var resultOptions = (result) => typeof result === "function" ? (value) => toManagerOptions(result(value)) : toManagerOptions(result);
+function createQueuedManager() {
+  const manager = ToastPrimitive.createToastManager();
+  let listeners = 0;
+  let queue = [];
+  let count = 0;
+  const browser = () => typeof window !== "undefined";
+  const whenHeard = (run) => {
+    if (listeners)
+      run();
+    else if (browser())
+      queue.push(run);
+  };
+  return {
+    " subscribe": (listener) => {
+      const unsubscribe = manager[" subscribe"](listener);
+      listeners++;
+      const queued = queue;
+      queue = [];
+      for (const run of queued)
+        run();
+      return () => {
+        listeners--;
+        unsubscribe();
+      };
+    },
+    add: (options) => {
+      const id = options.id ?? `toast-global-${++count}`;
+      whenHeard(() => manager.add({ ...options, id }));
+      return id;
+    },
+    close: (id) => whenHeard(() => manager.close(id)),
+    update: (id, updates) => whenHeard(() => manager.update(id, updates)),
+    promise: (promise, options) => {
+      if (listeners)
+        return manager.promise(promise, options);
+      if (browser())
+        queue.push(() => manager.promise(promise, options).catch(() => {}));
+      return promise;
+    }
+  };
+}
+var manager = createQueuedManager();
+function show(input, type) {
+  const options = toManagerOptions(input);
+  const id = manager.add({ type: "info", ...options, ...type && { type } });
+  return {
+    id,
+    update: (next) => manager.update(id, toManagerOptions(next)),
+    dismiss: () => manager.close(id)
+  };
+}
+var toast2 = Object.assign((input) => show(input), {
+  success: (input) => show(input, "success"),
+  error: (input) => show(input, "error"),
+  warning: (input) => show(input, "warning"),
+  info: (input) => show(input, "info"),
+  loading: (input) => show(withType(input, "loading")),
+  promise: (promise, options) => manager.promise(promise, {
+    loading: toManagerOptions(options.loading),
+    success: resultOptions(options.success),
+    error: resultOptions(options.error)
+  }),
+  update: (id, input) => manager.update(id, toManagerOptions(input)),
+  dismiss: (id) => manager.close(id),
+  " subscribe": manager[" subscribe"]
+});
+
+// components/overlays/toast/index.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 var ICONS = {
-  success: Check,
-  loading: LoaderCircle,
-  error: X,
-  warning: CircleAlert,
-  info: Info,
-  action: ArrowRight
+  success: "check",
+  loading: "loader-circle",
+  error: "x",
+  warning: "circle-alert",
+  info: "info",
+  action: "arrow-right"
 };
 var TONES = {
   success: "text-status-success bg-status-success/16",
@@ -75,7 +169,7 @@ var VIEWPORT = {
   "bottom-right": "bottom-4 right-4 flex-col-reverse items-end"
 };
 var PILL = sizeMap2.default.controlHeight;
-var BLUR = PILL / 2 * GOO_BLUR_RATIO;
+var BLUR = PILL / 2 * GOO_BLUR_RATIO2;
 var SNAP = { duration: 0 };
 var AUTO_EXPAND_MS = 150;
 var AUTO_COLLAPSE_BEFORE_MS = 2000;
@@ -84,31 +178,31 @@ var ToastSettings = createContext({
   timeout: 6000
 });
 function useToast2() {
-  const manager = ToastPrimitive.useToastManager();
+  const manager = ToastPrimitive2.useToastManager();
   return useMemo(() => {
-    const options = ({ action, ...rest }, type) => ({
-      ...rest,
-      type,
-      actionProps: action && { children: action.label, onClick: action.onClick }
-    });
-    const show = (o) => manager.add(options(o, o.type ?? "info"));
+    const show = (o) => manager.add({ type: "info", ...toManagerOptions(o) });
+    const typed = (type) => (o) => show(typeof o === "string" ? { title: o, type } : { ...o, type });
+    const result = (r) => typeof r === "function" ? (value) => toManagerOptions(r(value)) : toManagerOptions(r);
     return {
+      toasts: manager.toasts,
       show,
-      success: (o) => show({ ...o, type: "success" }),
-      error: (o) => show({ ...o, type: "error" }),
-      warning: (o) => show({ ...o, type: "warning" }),
-      info: (o) => show({ ...o, type: "info" }),
+      success: typed("success"),
+      error: typed("error"),
+      warning: typed("warning"),
+      info: typed("info"),
       promise: (promise, o) => manager.promise(promise, {
-        loading: options(o.loading, "loading"),
-        success: options(o.success, "success"),
-        error: options(o.error, "error")
+        loading: toManagerOptions(o.loading),
+        success: result(o.success),
+        error: result(o.error)
       }),
-      close: manager.close
+      update: (id, o) => manager.update(id, toManagerOptions(o)),
+      close: manager.close,
+      dismiss: manager.close
     };
   }, [manager]);
 }
 function Shape({ box, className, shapeRef }) {
-  const reduced = useReduceMotion();
+  const reduced = useReduceMotion2();
   return /* @__PURE__ */ jsx(motion.div, {
     ref: shapeRef,
     "aria-hidden": true,
@@ -118,16 +212,30 @@ function Shape({ box, className, shapeRef }) {
     transition: reduced ? SNAP : spring2.slow
   });
 }
+function StatusIcon({ type, icon }) {
+  const icons = useIcons2();
+  const component = typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && !isValidElement2(icon);
+  if (icon != null && icon !== false && !component)
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: icon
+    });
+  const Icon = component ? icon : icons[ICONS[type]];
+  return /* @__PURE__ */ jsx(Icon, {
+    size: 14,
+    strokeWidth: 2.5,
+    className: type === "loading" && !component ? "animate-spin" : undefined
+  });
+}
 function ToastItem({ toast }) {
   const { position, timeout } = useContext(ToastSettings);
-  const shape = useShape();
+  const shape = useShape2();
   const level = Math.min(useSurface2() + 2, 8);
   const gooId = `toast-goo-${useId().replace(/:/g, "")}`;
   const type = toast.type ?? "info";
-  const Icon = ICONS[type];
+  const customAction = toast.data?.action;
   const top = position.startsWith("top");
   const ending = toast.transitionStatus === "ending";
-  const hasBody = Boolean(toast.description || toast.actionProps);
+  const hasBody = Boolean(toast.description || toast.actionProps || customAction);
   const [hovered, setHovered] = useState(false);
   const [auto, setAuto] = useState(false);
   const expanded = hasBody && type !== "loading" && !ending && (hovered || auto);
@@ -164,7 +272,7 @@ function ToastItem({ toast }) {
   useLayoutEffect(() => {
     if (!ending || !root.current)
       return;
-    const hold = holdExit(root.current, "moderate");
+    const hold = holdExit2(root.current, "moderate");
     return () => hold.cancel();
   }, [ending]);
   const bodyHeight = expanded ? size.body : 0;
@@ -173,10 +281,10 @@ function ToastItem({ toast }) {
   const pillHeight = PILL + Math.min(bodyHeight, size.radius);
   const pill = { x: pillX, y: top ? 0 : height - pillHeight, width: size.pill, height: pillHeight };
   const bodyBox = { x: 0, y: top ? PILL : 0, width: size.width, height: bodyHeight };
-  const reduced = useReduceMotion();
+  const reduced = useReduceMotion2();
   const away = reduced ? { opacity: 0 } : { opacity: 0, y: top ? -6 : 6, scale: 0.95 };
   const move = reduced ? SNAP : spring2.slow;
-  return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
+  return /* @__PURE__ */ jsxs(ToastPrimitive2.Root, {
     ref: root,
     toast,
     swipeDirection: [top ? "up" : "down", position.endsWith("left") ? "left" : "right"],
@@ -189,17 +297,17 @@ function ToastItem({ toast }) {
     }),
     className: "relative w-[min(22rem,calc(100vw-2rem))] select-none outline-none [translate:var(--toast-swipe-movement-x)_var(--toast-swipe-movement-y)]",
     children: [
-      /* @__PURE__ */ jsx(GooFilter, {
+      /* @__PURE__ */ jsx(GooFilter2, {
         id: gooId,
         blur: BLUR
       }),
       /* @__PURE__ */ jsx(Shape, {
         box: pill,
-        className: cn2("rounded-full", SURFACE_SHADOW[3])
+        className: cn2("rounded-full", SURFACE_SHADOW2[3])
       }),
       hasBody && /* @__PURE__ */ jsx(Shape, {
         box: bodyBox,
-        className: cn2(shape.container, SURFACE_SHADOW[3])
+        className: cn2(shape.container, SURFACE_SHADOW2[3])
       }),
       /* @__PURE__ */ jsxs("div", {
         "aria-hidden": true,
@@ -208,12 +316,12 @@ function ToastItem({ toast }) {
         children: [
           /* @__PURE__ */ jsx(Shape, {
             box: pill,
-            className: cn2("rounded-full", SURFACE_BG[level])
+            className: cn2("rounded-full", SURFACE_BG2[level])
           }),
           hasBody && /* @__PURE__ */ jsx(Shape, {
             box: bodyBox,
             shapeRef: bodyShape,
-            className: cn2(shape.container, SURFACE_BG[level])
+            className: cn2(shape.container, SURFACE_BG2[level])
           })
         ]
       }),
@@ -226,7 +334,7 @@ function ToastItem({ toast }) {
             initial: false,
             animate: { x: pillX, y: top ? 0 : height - PILL },
             transition: move,
-            children: /* @__PURE__ */ jsx(ToastPrimitive.Title, {
+            children: /* @__PURE__ */ jsx(ToastPrimitive2.Title, {
               className: "relative inline-flex items-center whitespace-nowrap",
               children: /* @__PURE__ */ jsx(AnimatePresence, {
                 mode: "popLayout",
@@ -240,10 +348,9 @@ function ToastItem({ toast }) {
                   children: [
                     /* @__PURE__ */ jsx("span", {
                       className: cn2("flex size-6 items-center justify-center rounded-full", TONES[type]),
-                      children: /* @__PURE__ */ jsx(Icon, {
-                        size: 14,
-                        strokeWidth: 2.5,
-                        className: type === "loading" ? "animate-spin" : undefined
+                      children: /* @__PURE__ */ jsx(StatusIcon, {
+                        type,
+                        icon: toast.data?.icon
                       })
                     }),
                     /* @__PURE__ */ jsx("span", {
@@ -251,7 +358,7 @@ function ToastItem({ toast }) {
                       children: toast.title
                     })
                   ]
-                }, `${type}-${toast.title}`)
+                }, `${type}-${typeof toast.title === "string" ? toast.title : toast.updateKey}`)
               })
             })
           }),
@@ -264,15 +371,16 @@ function ToastItem({ toast }) {
               ref: body,
               className: cn2("flex flex-col items-start gap-3 p-4", top ? "pt-6" : "pb-6"),
               children: [
-                /* @__PURE__ */ jsx(ToastPrimitive.Description, {
+                /* @__PURE__ */ jsx(ToastPrimitive2.Description, {
                   className: "text-caption text-muted-foreground"
                 }),
-                toast.actionProps && /* @__PURE__ */ jsx(ToastPrimitive.Action, {
+                toast.actionProps && /* @__PURE__ */ jsx(ToastPrimitive2.Action, {
                   render: /* @__PURE__ */ jsx(button_default, {
                     size: "compact",
                     variant: "secondary"
                   })
-                })
+                }),
+                customAction
               ]
             })
           })
@@ -282,7 +390,7 @@ function ToastItem({ toast }) {
   });
 }
 function ToastList() {
-  const { toasts } = ToastPrimitive.useToastManager();
+  const { toasts } = ToastPrimitive2.useToastManager();
   return toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
     toast
   }, toast.id));
@@ -292,6 +400,7 @@ var ToastTrigger2 = forwardRef(({
   description,
   type,
   timeout,
+  icon,
   action,
   promise,
   success,
@@ -302,15 +411,15 @@ var ToastTrigger2 = forwardRef(({
   onClick,
   ...props
 }, ref) => {
-  const toast = useToast2();
-  const el = slotRender(render, asChild, children);
+  const toasts = useToast2();
+  const el = slotRender2(render, asChild, children);
   const press = (event) => {
     onClick?.(event);
     if (promise) {
-      toast.promise(promise(), { loading: { title, description }, success: success ?? {}, error: error ?? {} }).catch(() => {});
+      toasts.promise(promise(), { loading: { title, description, icon }, success: success ?? {}, error: error ?? {} }).catch(() => {});
       return;
     }
-    toast.show({ title, description, type, timeout, action });
+    toasts.show({ title, description, type, timeout, icon, action });
   };
   return el ? cloneElement(el, { ...props, ref, onClick: press }) : /* @__PURE__ */ jsx("button", {
     ref,
@@ -321,17 +430,18 @@ var ToastTrigger2 = forwardRef(({
   });
 });
 ToastTrigger2.displayName = "ToastTrigger";
-function Toast2({ position = "top-right", limit = 3, timeout = 6000, children }) {
+function Toast2({ position = "top-right", limit = 3, timeout = 6000, manager, children }) {
   const settings = useMemo(() => ({ position, timeout }), [position, timeout]);
-  return /* @__PURE__ */ jsx(ToastPrimitive.Provider, {
+  return /* @__PURE__ */ jsx(ToastPrimitive2.Provider, {
     limit,
     timeout,
+    toastManager: manager,
     children: /* @__PURE__ */ jsxs(ToastSettings.Provider, {
       value: settings,
       children: [
         children,
-        /* @__PURE__ */ jsx(ToastPrimitive.Portal, {
-          children: /* @__PURE__ */ jsx(ToastPrimitive.Viewport, {
+        /* @__PURE__ */ jsx(ToastPrimitive2.Portal, {
+          children: /* @__PURE__ */ jsx(ToastPrimitive2.Viewport, {
             className: cn2("fixed z-[60] flex flex-col gap-2 outline-none", VIEWPORT[position]),
             children: /* @__PURE__ */ jsx(ToastList, {})
           })
@@ -343,4 +453,4 @@ function Toast2({ position = "top-right", limit = 3, timeout = 6000, children })
 Toast2.Trigger = ToastTrigger2;
 var toast_default = Toast2;
 
-export { useToast2, ToastTrigger2, Toast2, toast_default };
+export { toast2, useToast2, ToastTrigger2, Toast2, toast_default };

package/dist/shared/{components-s2bz1xpk.js → components-49bsynbw.js}

@@ -1,13 +1,16 @@
+"use client";
+import {
+  SURFACE_BG2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
   useSurface2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   scroll_area_default
-} from "./components-hawvy2qz.js";
+} from "./components-2z48g4fp.js";
 
 // primitives/code/index.tsx
 import { Fragment } from "react";
@@ -51,7 +54,7 @@ function Code2({
   return /* @__PURE__ */ jsx(scroll_area_default, {
     orientation: "horizontal",
     viewportClassName: "scroll-fade-x",
-    className: cn2("rounded-xl", SURFACE_BG[level], className),
+    className: cn2("rounded-xl", SURFACE_BG2[level], className),
     children: /* @__PURE__ */ jsx("pre", {
       className: "m-0 w-max min-w-full p-4 font-mono text-caption leading-relaxed text-foreground",
       children: /* @__PURE__ */ jsx("code", {